Get element from which onclick function is called - javascript

I have a button with a onclick attribute which is pointing to the function test().
<button onclick="test()">Button 1</button>
<button onclick="test()">Button 2</button>
<button onclick="test()">Button 3</button>
Function test():
function test()
{
var button_name = this.html;
console.log("Im button "+ button_name);
}
How can I get informations about the clicked button?
e.g. How can i read the html?
jsfiddle: https://jsfiddle.net/c2sc9j9e/

Pass the this reference to the function, then read textContent property the text content of the node.
HTML
<button onclick="test(this)">Button 1</button>
Script
function test(clickedElement){
var button_name = clickedElement.textContent;
}
Fiddle

Four options:
Pass this into the function.
<button onclick="test(this)">Button 1</button>
and then use that argument in the function.
Hook up the handlers with addEventListener or jQuery's on, and then use this within the handler.
var buttons = document.querySelectorAll("selector-for-the-buttons");
Array.prototype.forEach.call(buttons, function(btn) {
btn.addEventListener("click", handler, false);
});
function handler() {
// Use `this` here
}
jQuery version:
$("selector-for-the-buttons").on("click", function() {
// Use `this` here
});
Hook up a single handler on a container these buttons are in, and use the target property of the event object to determine which was clicked (but note that if you use other elements within button, you'll need to loop up to the button first).
document.querySelector("selector-for-the-container").addEventListener("click", function(e) {
// Use `e.target` here
}, false);
jQuery version that handles the possibility of nested elements within the button for you:
$("selector-for-the-container").on("click", "button", function() {
// Use `this` here (note this is different from the DOM version above)
});

I came across an other extremely simple way to do it in Vanilla JS so I post it here for reference:
function whoami () {
var caller = event.target;
alert("I'm " + caller.textContent);
}
<button onclick="whoami()">Button 1</button>
<button onclick="whoami()">Button 2</button>
<button onclick="whoami()">Button 3</button>
I'm not sure about the browser support for it but it works at least on Safari, Firefox and Blink based browsers.

function test(button)
{
var button_name = button.getAttribute('name');
console.log("Im button "+ button_name);
}
<button onclick="test(this)" name="button1">Button 1</button>
<button onclick="test(this)" name="button2">Button 2</button>
<button onclick="test(this)" name="button3">Button 3</button>

If you want to use Jquery, then you can call the $(this) object in the function.

you must pass "this" to function
<button onclick="test(this)">1</button>
<button onclick="test(this)">2</button>
<button onclick="test(this)">3</button>
<script>
function test(t)
{
console.log(t);
}
</script>

Here is your solution jsfiddle , using jquery.
<button onclick="test(this)">1</button>
<button onclick="test(this)">2</button>
<button onclick="test(this)">3</button>
<script>
function test(button)
{
var button_name = $(button).html();
alert("Im button "+ button_name);
}
</script>

just add id to each button and pass it to your test function
and here is working jsfiddle
<button onclick="test(this.id)" id="button1">1</button>
<button onclick="test(this.id)" id="button2">2</button>
<button onclick="test(this.id)" id="button3">3</button>
<script>
function test(id)
{
var button_name = id;
alert("Im button name is : "+ button_name);
console.log("Im button name is :"+ button_name);
}
</script>

What you want is the event that triggers the click, and you do that by specifying the function call as MyFunction(event). For example:
<ul>
<li onclick="MyFunction(event)">Red</li>
<li onclick="MyFunction(event)">Orange</li>
<li onclick="MyFunction(event)">Yellow</li>
</ul>
and then your Javascript function can be:
function MyFunction(ev) {
// Now you have access to everything in the event
//- including the triggering element
var element = ev.srcElement;
}
By leaving out the (event) parameter in the specification of the onclick function call you don't get it.

Related

Pass in function parameter without invoking function

document.querySelector(DOM.refreshRem).addEventListener('click', function(param));
This is the line I'm having trouble with, I want to connect the function but without the (), so it isn't invoked right away, but the function accepts a parameter, so how do I go around it, my first idea would be to just wrap it in another function, but is there an easier way, this seems like too much nesting
So use a function or use bind
function test1(event, param) {
console.log(param)
}
function test2(param, event) {
console.log(param)
}
const btn1 = document.querySelector('.test1')
btn1.addEventListener('click', function(event) {
test1(event, 'foo')
});
const btn2 = document.querySelector('.test2')
btn2.addEventListener('click', test2.bind(btn2, 'bar'));
<button type="button" class="test1">click 1</button>
<button type="button" class="test2">click 2</button>

get id of button by clicked with function

html
<button id="test1" onclick="getclickname(); return false;">click</button>
javascript (it's showing "Undefined")
function getclickname()
{
alert(this.id);
}
i dont want code like this
<button id="test1" onclick="alert(this.id);">click</button>
call getclickname is needed, thanks guys
You have to pass corresponding argument to the function.
You need to pass button object to onclick function to get the id of button.
function getclickname(obj)
{
//By passing object as argument you can access all properties of that element
alert(obj.id);
alert(obj.className);
}
<button id="test1" onclick="getclickname(this); return false;" class="test_1">click</button>
You can directly pass this.id as well as an argument
function getclickname(id) {
alert(id);
}
<button id="test1" onclick="getclickname(this.id); return false;">click</button>
Note:
A bit code modification is instead of return false; you can add return before function name and that will do the same thing. like :- onclick="return getclickname(this.id);"
By passing object as argument you can access all properties of that element (check first code sample modification).
Hope this Helpful...
view
onclick="return getclickname(this);"
js
function getclickname(these)
{
alert(these.id);
}
Please try the below code. It's working for you.
Use class for click event in button.
<button id="test1" class="test-btn" >click</button>
Use the below click event function to get id after click.
$('.test-btn').click(function() {
var id = $(this).attr('id');
alert(id)
});
Use like this
<button id="test1" onclick="getclickname(this); return false;">click</button>
<script>
function getclickname(e)
{
alert(e.id);
}
</script>

How can I show and hide a button after click?

I tried this:
<button onclick="button_onclick()">Click me</button>
js:
button_onclick() = "this.style.visibility = 'hidden';"
You have a spelling error in visibility and this is not how you define functions in javascript.
You also need to pass down the element reference down as a parameter of the function.
function button_onclick(element) {
element.style.visibility = 'hidden';
}
<button onclick="button_onclick(this)">Click me</button>
OR with inline js:
<button onclick="this.style.visibility = 'hidden'">Click me</button>
There are three problems:
you're calling button_onclick() as a function but it's not defined as one.
using inline onclick is no good
you've misspelled visibality. You should use visibility instead.
If you want to handle events. the best way is to attach an event listener to the element.
const myButton = document.querySelector('.my-button')
myButton.addEventListener('click', () => {
myButton.style.visibility = 'hidden'
})
<button class="my-button">Click me</button>
Easest way of doing
<button onclick="this.style.display = 'none'">Click me</button>
Note this way of doing is not a good practice
So do it in this way
<button id="btn"> Click me </button>
<script>
const btn = document.querySelector ('#btn');
btn.addEventListener ('click', () =>{
btn.style.display = "none"
// btn.style.visibility = "hidden"
})
</script>
Thank you
try this
function button_onclick() {
document.getElementById("btn").style.visibility="hidden";
}
<button id="btn" onclick="button_onclick()">Click me</button>

JS - Programmatically send element with onclick

<button id="button1">Button</button>
document.getElementById("button1").onclick=function(){ ???.style.display="none" };
As you can see above, how could I change the style to hide it with the onclick?
(and no, I don't want to do <button onclick="x">)
Have a look at this
document.getElementById("button1").onclick=function(e){ e.target.style.display="none" };
<button id="button1">Button</button>
Use srcElement or target. (target is standard and srcElement is alias.)
document.getElementById("button1").addEventListener( "click", e => {
e.srcElement.style.display = "none";
} );
<button id="button1">Button</button>
document.addEventListener("click", function(){
document.getElementById("button1").style.display = "none";
});
<button id="button1">Button</button>
You can use addEventListener and change the style on click.
document.addEventListener("click", function(){
document.getElementById("button1").style.display = "none";
});
<button id="button1">Button</button>
You can use this inside the click handler to refer to the element clicked:
document.getElementById("button1").onclick=function(){
this.style.display="none";
};
<button id="button1">Button</button>
Using this means you could (if you wanted to) use the same handler function on multiple elements. You could also add the event handler with addEventListener as an alternative - this still refers to the element the handler is attached to.

How to reference the clicked element within a function that is called by the handler

$(".btn").click(function() {
someFunction();
});
function someFunction() {
var btnID = $(".btn").attr("data-index"); // This selector should reference the button that was clicked
console.log(btnID);
}
I want the selector inside someFunction() to reference the exact button that was clicked, not just the first element in the DOM with the class .btn.
Is there a way to do this without giving all buttons unique IDs?
You can give same class and different id's for the buttons.
$(".btn").click(function() {
someFunction();
});
function someFunction() {
$(".btn").each(function(){
console.log($(this).attr("id")+" value:"+$(this).val());
})
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="btn" id="btn1" value="1">
<input type="button"class="btn" id="btn2" value="2">
<input type="button" class="btn" id="btn3" value="3">
You need not separate the callback from the event handler.
Instead, just incorporate the callback into the handler directly. Then you can reference the element using the 'this' keyword
$(".btn").click(function() {
var btnID = $(this).data("index");
console.log(btnID);
});
Also, it's worth noting that when you are using a 'data' attribute, you can reference it using $(el).data('attrName')

Categories