This question already has answers here:
Javascript dynamically invoke object method from string
(5 answers)
Closed 8 years ago.
I want to use a method in which i will pass a function_name as parameter to another function.
On the other function, the parameter will be treated as a function
here's my code example
<div class="btn_crt_acct" onclick="toggle_object('register_div','slideDown');">
CREATE AN ACCOUNT
</div>
whch will call a function like this
function toggle_object(obj,fun)
{
$('#'+obj).fun('slow');
// fun => slideDown
// so $('#'+obj).fun('slow'); => $('#'+obj).slideDown('slow');
}
but i am doing something wrong as it states an error in console, $fun(..) is not a function.
How can i make it work perfectly??
Thanks
You'd do that with bracket notation
$('#'+obj)[fun]('slow');
FIDDLE
But why not use a proper event handler, and slideToggle if you intend to toggle it
$('.btn_crt_acct').on('click', function() {
$('#register_div').slideToggle();
});
Related
This question already has answers here:
Why do I have to omit parentheses when passing a function as an argument?
(2 answers)
Closed 4 years ago.
I am new to javascript and unable to understand one concept-
Why don't we use parentheses in front of name of an external function, while calling it(that particular function) by addEventListener method, in JavaScript.
For Example-
.addEventListener('click', myExternalFunction);
and not-
.addEventListener('click', myExternalFunction());
Whenever you are adding Event Listeners in any of the language you provide the delegates / Function Pointers.
They are not the actual function call they just point to the function and when the event actually occurs it will call that particular function.
This is how Delegates / Function Pointers works.
This question already has answers here:
What does "this" refer to in arrow functions in ES6?
(10 answers)
Closed 4 years ago.
I'm trying to get the height of my elements that contains class category. I wan't to use .each() function but it seems to return me the entire document. There's my code :
$('.category').each((index) => {
console.log($(this).height());
});
This return me :
828 (the document height)..
Any idea ?
That's because you are using an Arrow Function, which binds the this value of the enclosing context.
Use a regular Function.
$('.category').each(function(index) {
console.log($(this).height());
});
I know they look cute and all that but they are not perfect replacements for regular Functions.
This question already has answers here:
Javascript event handler with parameters
(9 answers)
Closed 7 years ago.
I need to send parameters to the on change event of a dropdown which is generated on runtime. How can i accomplish such thing like:
$(options.host_element).find('select').on('change',(graph_widget.draw_graph).bind(options));
options is the parameter i want to send to the function draw_graph, the function is linked but not the parameters
Not sure of your function's signature, but you can pass parameters to the function itself just like you do to any normal function, so it would look something like this:
$(options.host_element).find('select').on('change',function(){
graph_widget.draw_graph(options);
});
Bind is used to change the value of this that will be used in the function, not quite what you're looking for.
I made a small fiddle to demonstrate:
Fiddle
jQuery.on has an optional parameter called data:
$(options.host_element).find('select').on('change', options, graph_widget.draw_graph);
Later in your event handler, you may access data using e.data:
function draw_graph(e) {
var options = e.data;
}
This question already has answers here:
jQuery equivalent of JavaScript's addEventListener method
(7 answers)
Closed 8 years ago.
I have the below code where I successfully disable the properties
.prop("onclick", null)
.prop("onmouseover", null)
.prop("onmouseout", null);
Now if I want to rebind the click event what should I do.
For adding events back to a element use the bind function.
$("YourElement").bind("event",function(){
//Do what you want.
}
You can do it with many ways. I don't use to call the prop() method, but I think you just have to use it and set as your second parameter the name of your function.
function yourFunction()
{
// The job with onclick
}
DOMElement.prop("onclick", "yourFunction");
You can also use anonymous functions.
Use this documentation to work : http://api.jquery.com/prop/
I suggest you should use removeProp() instead of prop("yourprop", null) !
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.