When I call editWorkout function for the first time, the variable 'workout' gets passed in the editWorkout2 function, but then, during the second time, when the same thing happens, but in this case 'workout' has new value, this value for some reason won't change in editWorkout2 function. How can I fix that?
function editWorkout(e, workout) {
e.stopImmediatePropagation();
saveBtn.addEventListener("click", function (e) {
console.log(workout);
editWorkout2(e, workout);
}.bind(this)
);
}
on each call of your editWorkout function, you're adding a new event listener to your "saveBtn" element with the same event type.
I recommend you read the usage notes of addEventListener.
So, the problem was as follows: because during the second call and all of the consecutive calls of the function editWorkout the event listener was going on top of the previous one, for some reason variable workout was not changing in that eventListener as a parameter. So I removed event listener in the editWorkout2 function, and everything started working fine
Related
const eventHandler = function (eventObject) {
console.log('You clicked on the page')
console.log(eventObject)
}
document.addEventListener('click', eventHandler)
So the codes above, as you can see we are listening to the click event on the page, with a "seperated" callback function, or an event handler function named eventHandler. And you can see this eventHandler function it expects an eventObject parameter which is the event object itself.
You can see, when i pass the function eventHandler into the addEventListener() method, i didn't passing any argument, right? So i didn't pass the eventObject into it. But, when i run the codes, the codes still running without error, so when i clicked on the page, i get a You clicked on the page message, and the event object.
Why is that? How could that function can log the event object into the console, when it requires us to pass the event object into it as an argument and we didn't do that? And that is my question. I got into this situation when playing around with DOM event, and it really make me confused. So hopefully someone can help me understand, what's going on here! Thank you very much!
Sorry you may want to run this codes on yourself, I will update the demo later, thank you so much!
The reason you don't need to pass an event as a parameter to the function eventHandler that you are calling in the document onclick event listener, is because it already has an event that has been registered to it in the function
const eventHandler = function (eventObject) {
console.log('You clicked on the page')
console.log(eventObject)
}
// document.addEventListener('click', eventHandler)
// This function above is the exact same as the one here below
// That's why it works, because the event object has already been passed to the function
document.addEventListener('click', function(eventObject){
console.log('You clicked on the page')
console.log(eventObject)
})
<h2>Click anywhere to run the function</h2>
I have a small react app. in One of my main components, I am adding an event listener on componentDidMount but when I try to remove it on componentWillUnmount it does not seem to be doing it. I have even tried putting them one after the other and still it does not seem to be removed.
Here is sample code of my situation (reduced from the real one)
listenerF(e){
console.log('im scrolling!'
//..actually does other stuff
}
componentDidMount(){
window.addEventListener('scroll', e => this.listenerF(e))
}
componentWillUnmount(){
window.removeEventListener('scroll',e=>this.listenerF(e))
console.log('unmounted')
}
I suspect it might be the arrow function acting as an anonymous function, and therefore removeEventListener isn't matching the functions properly.
I tried some alternatives to add the event listener with just a function call or without an arrow function, but it didnt seem to work like that, so Im not sure what may be wrong with my syntax or setup that the event is getting added right, but cannot remove it
React injects the event to your handler automatically there is no need to wrap it in an arrow function just to pass the event, the problem is that React had no refference to the function that you passed to your handler.
listenerF(e) { // dont forget to add the event as a parameter here
console.log(e);
console.log("im scrolling!");
}
componentDidMount() {
window.addEventListener("scroll", this.listenerF);
}
componentWillUnmount() {
window.removeEventListener("scroll", this.listenerF);
console.log("unmounted");
}
The problem here is that you are using two different functions: One that is created when you add the event listener (the arrow function). And a different one that you use when you try to remove the listener (the arrow function.)
As the documentation state:
The event listener to be removed is identified using a combination of the event type, the event listener function itself, and various optional options that may affect the matching process.
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener
I have an event listener on an object which fires a function when the object changes.
This is the code:
window.parent.document.getElementById('campval').addEventListener("change", getscriptbuttons1());
This works perfectly the first time that the object changes however, all consecutive changes do not trigger the event listener.
Is this the normal behaviour of Javascript? What can I do to rectify this issue?
No, the event listener should get fired every time.
I think this error is due because you are calling the function instead of passing it as a parameter:
getscriptbuttons1 // passes the function
getscriptbuttons1() // calls the function and passes whatever it returns
Did you mean? :
window.parent.document.getElementById('campval').addEventListener("change", getscriptbuttons1);
No, they do not get destroyed. You have to remove them manually. The issue is that you are actually calling the function in the event listener. You need to change it to this: (no parens, don't call it)
window.parent.document.getElementById('campval').addEventListener("change", getscriptbuttons1);
A few weeks ago I was painfully able to dynamically add buttons to an HTML DOM object that has its own .on('click'.. handler, and use e.stopPropgation to stop these new child elements from firing the event.
The weird thing I did was call a function without any parenthesis. I have no idea why I did this or why it works, or why it does not work when I do attach parenthesis. I want to know if I am doing something by fluke and not design (and now I will add comments to it).
It goes as such:
//Container is the parent element
// var buttons stores the buttons with class 'buttons'
$('.container').on('click', function(){
$(buttons).appendTo($(this)).fadeIn(500).find('.buttons').click(tableButton);
});
function tableButton(e){
e.stopPropagation();
//do stuff
}
I can't figure out why I wrote the call to tableButton with no arguements or why it works perfectly. I tried to change the syntax to
.find('.buttons').on('click', function(e){
tableButton(e);
});
but then it no longer works.
Any help appreciated!
It works because you're passing a function to the click handler rather than calling the function yourself (the ()) An example of that:
var testFunction = function(msg) {
alert(msg);
}
var functionCaller = function(functionToCall) {
functionToCall('hello!');
}
functionCaller(testFunction);
functionCaller passes the message argument to testFunction(), but we only pass testFunction to functionCaller (without arguments)
For the part which doesn't work, isn't the function name tableButton() instead of tableButtons()?
See http://jsfiddle.net/g2PAn/
You don't actually call it, you just declare it and the arguments it accepts. The click callback is called with an argument indeed, but not by you.
The problem probably comes from the fact that jQuery calls your function with the element clicked bound as this, you could call table button like this:
.find('.buttons').on('click', function(e){
tableButton.call(this, e);
});
In my javascript code ( which is too long , so i can`t put it here ), functions are calling more than once , like suppose :
$("#button").bind({ click : Call }); // bind the Call with button click event
function Call()
{
alert("This message shows me more than once when i clicked the button");
}
if this alert message shows me more than once it means function Call() is calling more than once. Can anybody guess or tell me what's going on in my code? (Please don't ask me for code)
Works for me: http://jsfiddle.net/aC8Bm/
I'm guessing that you are binding more than once somewhere.
Also, I'd recommend either returning false from the Call function, or stopping event propagation.
One more thing: avoid naming functions with an uppercase -- that's reserved for constructor functions by convention.
You're hooking the event handler to the button the number of times 'Call' is being called. Do you have this code in something like a template or partial file?
Instead of doing this inside any function:
$("#button").bind({ click : Call });
Place the following somewhere outside:
$("#button").live("click", Call);
It will bind once for all existing and ever added #button