How to pass id of an element to a js function? [duplicate] - javascript

This question already has answers here:
Pass element ID to Javascript function
(5 answers)
How to pass the id of an element that triggers an `onclick` event to the event handling function
(7 answers)
Closed 7 years ago.
I am using tag, and I want to pass its id to function when users clicks on it, I am doing code in onclick event.
following is my html code;
<a class="color_2" id="1" onclick="ConfirmDelete()">Delete</a>
here I want to pass this is to ConfirmDelete() function.

You can just type onclick="ConfirmDelete(this.id) and it will be sent to your function.
and in function definition;
function ConfirmDelete(var_id)
{
alert (var_id);
}

Related

How can i correctly pass a function to a eventListener? [duplicate]

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);

Why console.log() bypasses addEventListener? [duplicate]

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 in event handler on HTML object [duplicate]

This question already has answers here:
"this" inside event handler from HTML attribute
(1 answer)
How does the "this" keyword work, and when should it be used?
(22 answers)
Closed 3 years ago.
I can't quite get understand of this simple example:
<button onclick='clickHandler(this)'>test</button>
function clickHandler(el){
var a = this;
}
When clicking the button, el is mapped to HTML event listener. But, a=this called inside function gives me global window object. Why is this inside function body not a HTML event listener (in this case it's button).

How to call functions dynamically in Javascript [duplicate]

This question already has answers here:
How to pass extra parameter to event handling callback?
(2 answers)
Pass an extra argument to a callback function
(5 answers)
Closed 5 years ago.
I have a function where I would like to call classList methods dynamically, something like this:
function expand(action) {
searchContainer.classList[action]("expanded");
}
button.addEventListener("click", expand('add'), false);
searchContainer.addEventListener("onblur", expand('remove'), false);
But not sure how can I do that?

Use a variable as function in jquery [duplicate]

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();
});

Categories