-1
2つの番号を追加するサンプルアプリケーションを追加しています。私はこのためのクラスを作ろうとしています。以下は私のHTMLとJavascriptです。 今addメソッドJavascriptのクラスとイベントリスナー
Uncaught TypeError: Cannot read property 'val'of undefined'.
からエラーを取得することは、私が知っているこのイベントリスナーでthis文脈によるものです。これに対処する方法を教えていただけますか？あなたが割り当てたり渡すと
<html>
<head>
<title>JS Tips</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script>
/**
* Class for calculating marks
*/
var MarksCalculator = function() {
//Scope globalization. This is important. It helps us to use this context in other context
return {
// Variable declaration
e1: "",
e2: "",
e3: "",
science_mark: "",
maths_mark: "",
init: function (e1, e2, e3) {
// Variable initilization
this.e1 = e1;
this.e2 = e2;
this.e3 = e3;
},
// Adding marks
add: function() {
this.science_mark = this.e1.val();
this.maths_mark = this.e2.val();
if (this.validateMarks()) {
// Getting the values
m1 = parseInt(this.science_mark);
m2 = parseInt(this.maths_mark);
// Adding the value and assigning to result element.
this.e3.html(m1 + m2);
}
},
// Adding event listner
addListener: function (el, type, fn) {
// Jquery bind function
el.bind(type, fn);
},
validateMarks: function() {
var alertMsg = "Enter a valid number";
if (this.science_mark && this.maths_mark && !isNaN(this.science_mark) && !isNaN(this.maths_mark)) {
return true;
} else {
this.showAlert(alertMsg);
}
},
showAlert: function (msg) {
alert(msg);
}
}
}
</script>
<script type="text/javascript" >
// MarksCalculator object
var marksCalculatorObj = new MarksCalculator();
$(document).ready(function() {
//calling init function
marksCalculatorObj.init($("#num1"), $("#num2"), $("#result"));
// adding event listners
marksCalculatorObj.addListener($("#add"), "click", marksCalculatorObj.add);
});
</script>
</head>
<body>
<h4>Total Marks in First Sem</h4>
<input type="text" id="num1" class="num1" placeholder="Marks in Science" />
<input type="text" id="num2" class="num2" placeholder="Marks in Maths" />
<button id="add" class="add">Add</button>
<button id="result" class="result"> </button>
</body>
</html>
'someObject.someMethod'は、' someMethod'がsomeObject' 'から切り離され、それの何のメモリを持っていません。したがって、メソッドを渡す代わりに、オブジェクトからメソッドを呼び出す関数を渡します。 –
@squint行をmarksCalculatorObj.addListener（$（ "＃add"）、 "click"、function（）{marksCalculatorObj.add（）}）に変更して解決しました。 –