-1
Ich füge eine Beispielanwendung hinzu, die 2 Zahlen hinzufügt. Ich versuche, dafür eine Klasse zu machen. Unten ist mein HTML und Javascript. JetztKlassen- und Ereignislistener in Javascript
Uncaught TypeError: Cannot read property 'val'of undefined'.
einen Fehler von Add-Methode bekommen Ich weiß, dies ist aufgrund this Kontext in Event-Listener. Können Sie bitte Anleitung dafür geben?
<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>
Wenn Sie zuweisen oder geben 'someObject.someMethod' wird die' someMethod' von 'someObject' freistehend und hat keine Erinnerung an sie. Übergeben Sie also anstelle der Methode eine Funktion, die die Methode aus dem Objekt aufruft. –
@squint Gelöst durch Ändern der Zeile in marksCalculatorObj.addListener ($ ("# add"), "click", function() {marksCalculatorObj.add()}); –