This question already has answers here:
How does the "this" keyword work, and when should it be used?
(22 answers)
How does the "this" keyword in Javascript act within an object literal? [duplicate]
(4 answers)
Closed 6 years ago.
I am very new to OOP and attempting my first project with it. Here is my question:
var calculator = {
operationBar: document.getElementById('operation-bar'),
print: function(){
this.operationBar.innerHTML += 1;
}
}
var one = document.getElementById('number1');
one.addEventListener('click',calculator.print)
When I click on my HTML element with the id (number1) I get the following error:
Cannot read property 'innerHTML' of undefined.
It is not relating the this keyword to my calculator object.
However if I do this:
var calculator = {
operationBar: document.getElementById('operation-bar'),
print: function(num){
this.operationBar.innerHTML += 1;
}
}
calculator.print()
It works and the this keyword seems to be working correctly.
The reason I know the problem is with the this keyword is because if I perform the function in the first snippet and replace this with calculator then it will work, as my event handler function as well.
Why is it behaving this way?
Related
This question already has answers here:
Javascript: Object Literal reference in own key's function instead of 'this'
(5 answers)
How does the "this" keyword work, and when should it be used?
(22 answers)
Closed 1 year ago.
Apologies if the terminology is off - javascript isn't my thing.
I have a function:
var input = {
getVal: function () {
return $(this).attr("data-current-val");
},
setVal: function () {
$(this).attr("data-current-val", $(this).val());
},
valHasChanged: function () {
return $(this).val() !== $(this).attr("data-current-val");
}
};
As you can see there is some repetition. Firstly, I repeat the data attribute name several times; secondly, I select a jquery object numerous times.
I've tried to remove the repetition. For instance, in respect of the data attribute, by adding node: "data-current-val" at the top and then calling it with this.node in place of the string. That causes an error, as does trying to define and then use the jquery objectin the same way.
Similarly part of the boolean in valHasChanged $(this).attr("data-current-val"), logically could be replaced by this.getVal but that doesn't seem to work either. Where am I going wrong?!
Any help appreciated.
This question already has answers here:
Why JavaScript function declaration (and expression)?
(5 answers)
Why use named function expressions?
(5 answers)
Closed 2 years ago.
Need your assistance. I have a function that was defined in onclick event and when i try to call it later there is an error that says function undefined.
author.onclick = function authorSlideInfo(event){
// do work
}
authorSlideInfo.then(() => {
// do work
}
Function returns a promise and i want to do something else after it ends. Is my function not in global scope? How to overcome this?
This question already has answers here:
How does the "this" keyword work, and when should it be used?
(22 answers)
How to access the correct `this` inside a callback
(13 answers)
Closed 5 years ago.
I'm now facing a js closure problem. In the code bellow, I'm trying to bind an event handler "getNum" to the button, the problem is that this handler is an attribute in an object, so I read it in a book it says I should put my handler in a closure function like bellow, the problem is that I don't really get it why "this" argument point to the correct object when I put the handler in an anonymous function; And why pass an "event" argument to that function, what does "event" argument referring to, is it the event object when I click the button?
this.num = 9;
var myObj = {
num : 81;
getNum : function(){return this.num;}
}
var btn = document.getElementById("my-btn");
// btn.addEventListener("click",myObj.getNum); this doesn't work cause "this" point to the btn object,which doesn't have num attribute.
btn.addEventListener("click",function(event){
myObj.getNum(event);
});//worked, but I don't know why.
This question already has answers here:
How does the "this" keyword work, and when should it be used?
(22 answers)
What is the 'new' keyword in JavaScript?
(17 answers)
Closed 5 years ago.
I have the following code-
var x=function(){
alert("hello");
}
var z=x;
z();// it works nicely
Now say I modified the code a bit-
var x=function(){
this.show=function(){
alert("hello");
}
}
var z=x;// It doesn't work unless I write var z=new x();
z.show();
I am wondering what difference 'this' keyword is creating between this two function and why I need to use an extra new keyword in the second case.
This question already has answers here:
What is the purpose of a self executing function in javascript?
(21 answers)
What is the (function() { } )() construct in JavaScript?
(28 answers)
Closed 8 years ago.
This probably is not a new question, but where is the purpose of wrapping a function or codes inside ((function () {...})());? for instance,
//Self-evoking anonymous functions
((function () {
alert("hi");
})());
What's the difference with no wrap,
alert("hi");
I still get the same result - hi
What can you pass/ put in the brackets in the end bit - })());? and why?
Using a function creates a scope. You can have params inside and do more than just alerting.
Now you can do the same without a function, but then you will keep the state on the window object and thats something that you would like to prevent in some cases.