This question already has answers here:
Javascript "addEventListener" Event Fires on Page Load [duplicate]
(2 answers)
Closed 6 years ago.
var function1 = function (ans){
alert("A");
}
$(document).ready({
$("input[type='radio']").click(function1(ans));
});
If function1 has no parameter then we can just have .click(function1) and function1 will not be called.
Meanwhile, when there is a parameter, function1 is called immediately when document is loaded. How to pass a parameter to a function without having the function called ?
You have to pass a callback function:
$(document).ready({
$("input[type='radio']").click(function(){
function1(ans));
});
});
$("input[type='radio']").click(function1(ans)); triggers the click event handler automatically.
Related
This question already has answers here:
Javascript, addEventListener callback function executes immediately and only once? [duplicate]
(3 answers)
Closed 1 year ago.
I made a basic eventListener which creates an alert on button click. This one doesn't work (it calls the alert on the page load)
function handleClick(){
alert("hi!");
}
document.querySelector("button").addEventListener("click",handleClick());
this one works instead, but i don't understand why
document.querySelector("button").addEventListener("click",function(){
alert("hello");
});
with handleClick() you are executing the function when that statement is read. You need to pass in the function handleClick reference.
This:
document.querySelector("button").addEventListener("click",handleClick);
This question already has answers here:
addEventListener calls the function without me even asking it to
(5 answers)
Why is the method executed immediately when I use setTimeout?
(8 answers)
Closed 1 year ago.
I have a button which on click is supposed to execute the addEventListener function. On the callback function part I directly use a console.log.
<button id="btnTrans">Translate</button>
var buttonTranslate = document.querySelector("#btnTrans");
buttonTranslate.addEventListener("click", console.log("clicked"));
as soon as the DOM loads, "clicked" appears on the console. Shouldn't it wait for the event to happen first?
The console.log is immediately executed because it is not wrapped in a function. Wrap it in a function:
buttonTranslate.addEventListener("click", () => { console.log("clicked") });
This question already has answers here:
Javascript "addEventListener" Event Fires on Page Load [duplicate]
(2 answers)
JavaScript closure inside loops – simple practical example
(44 answers)
Closed 5 years ago.
My EventListener is calling the function before the click with this code... what's wrong with that line?
It was working fine when I had the function inside the parameter, but now that i'm calling it from there instead it's calling it prematurely before any click occurs.
divs[i].addEventListener('click', xopush(i), null);
It's calling a function with and argument passing to the function()... not an alert.
//Instead of EventListener I usually prefer to use...
divs[i].onclick = function() {
xopush(i);
}
... which is a answer to this. However, I was looking forward to using the eventListener so I could turn it off after 1 click on the element.
This question already has answers here:
Why is my function call that should be scheduled by setTimeout executed immediately? [duplicate]
(3 answers)
Closed 7 years ago.
I'm trying to call a function every x-seconds,
setInterval( alert("Hello"),2000);
But the alert function appear just for the first call,
You may try this:
setInterval(function() {
alert("Hello");
} ,2000);
It's not working like you thought. The alert fires/runs directly without interval because you've directly called it. To be more clerer, in your code:
setInterval(alert("Hello"),2000);
You are calling the alert("Hello") but you should pass a function (or bind) which you want to run on an interval, which is:
setInterval(function(){
// ...
}, 2000);
So the passed anonymous function will be called using the given interval (bind is another way but I've used a function/closure for simplicity to clarify you).
This question already has answers here:
what is the difference between calling function in JavaScript with or without parentheses ()
(4 answers)
Closed 9 years ago.
A simple question from someone trying to learn:
I have this:
$(function(){$("#topFlag").hover(changeFlag, setFlag ); });
function changeFlag(){
//some code
};
function setFlag(){
//somecode
};
And it's all working (now). But what I expected to use was:
$(function(){$("#topFlag").hover(changeFlag(), setFlag() ); });
What's the difference? Why doesn't changeFlag() (with the parens) work? Isn't this a function call? What if I wanted to pass a parameter to the function?
Thanks for any insights (or pointers to documentation I can read). I've already checked out:
http://api.jquery.com/hover/
http://www.w3schools.com/js/js_functions.asp
changeFlag is a function.
changeFlag() calls that function.
You need to pass the function. You don't need to call the function and pass its return value.
When you add braces after a function name , it executes the function
setFlag() ; // calls the function
But you want the function to fire , when you hover over the element
And not at the time of attaching the event
In javascript the functions are also variables, when you pass it as a parameter you want to send the function to execute, if you write this yourFunc() you would be sending the result of that function instead.
To send parameter I use this:
$(function(){$("#topFlag").hover(function(){changeFlag(param1, param2,...)}, function(){setFlag(param1, param2,...)}); });
this creates an anonym function that call your functions.