I have read about "this" keyword and I learned that 'this' keyword works for the object which is in context.
<!DOCTYPE html>
<html>
<body>
<form id="myForm">
<label>Type anything but "fun": <input id="noFun" type="text" oninput="checkValid" required ><input type="submit"></label>
<div><button onclick="previewMessage()">Preview errors</button></div>
<div id="err"></div>
</form>
<script>
function checkValid() {
if (this.value == "fun") {
this.setCustomValidity("You're having too much fun!");
} else {
// input is fine -- reset the error message
this.setCustomValidity('');
}
}
function previewMessage() {
var myform = document.getElementById("noFun")
document.getElementById("err").innerHTML = myform.validationMessage;
}
</script>
</body>
</html>
But when I use oninput = "checkValid" , it should copy the checkValid function and the "this" keyword inside the function should point to input object.But that's not the case!!!
Check out this another piece of code, it means the same as the previous one, but runs normally.
<form id="myForm">
<label>Type anything but "fun": <input id="noFun" type="text" oninput="checkValid(this)" required ><input type="submit"></label>
<div><button onclick="previewMessage();">Preview errors</button></div>
<div id="err"></div>
</form>
<script>
function checkValid(input) {
if (input.value == "fun") {
input.setCustomValidity("You're having too much fun!");
} else {
// input is fine -- reset the error message
input.setCustomValidity('');
}
}
function previewMessage() {
var myform = document.getElementById("noFun")
document.getElementById("err").innerHTML=myform.validationMessage;
}
</script>
Can you explain me the difference between the two snippets and why the first example does not work as expected.
Thanks in advance!!!
2 Answers 2
But when i use oninput="checkValid" , it should copy the checkValid function and the "this" keyword inside the function should point to input object.
No, it shouldn't.
The value of an intrinsic event attribute is the body of the event handler function.
The HTML oninput="checkValid" is equivalent to the JavaScript:
reference_to_input.oninput = function (event) {
checkValue;
};
Mentioning a variable (like checkValue) without doing anything to it (like putting () after it to call a function) does nothing.
Comments
The way you've set up the event handler is such that the value of this will not be the <input> element. You've got what amounts to a "naked" function call, so this will refer to the window object.
If, however, you were to establish the event handler in JavaScript like this:
document.getElementById("noFun").oninput = checkValid;
you'd get this referring to the element.
Note that your code will pass the reference to the element as a parameter, which is why your second sample of code works.
checkValid(),thisiswindow. When calling it, you either have to do something likethis.checkValid = checkValid; this.checkValid()or call it likecheckValid.call(this).