-1
Я добавляю пример приложения, которое добавляет 2 числа. Я пытаюсь сделать класс для этого. Ниже мой HTML и Javascript. Теперь получаю сообщение об ошибке от метода добавленияКласс и слушатели событий в 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 Решено путем изменения строки на меткиCalculatorObj.addListener ($ ("# add"), "click", function() {marksCalculatorObj.add()}); –