Retrieve the element that was clicked by targeting its class name using JavaScript

Question

Retrieve the element that was clicked by targeting its class name using JavaScript

Unfortunately, I couldn't create this example in JSFiddle as it's currently in read-only mode.

My goal is to identify the specific element that was clicked based on a given class.

var button = document.getElementsByClassName("mybutton");
button.onclick = function() {
    //How can I pinpoint the exact button that was clicked?
};

<button class="myclass">Button 1</button>
<button class="myclass">Button 2</button>

Please refrain from providing jQuery solutions as they are not an option in this case.

javascript

Answer 1

Answer №1

Forget about using document.getElementByClassName, switch to document.getElementsByClassName.

Do you see the distinction now?

It's a simple mistake to make:

document.getElementByClassName
document.getElementsByClassName
                   ^

The former is nonexistent unless specifically defined, while the latter is functional in current web browsers. getElementsByClassName will provide a node list that requires iteration for attaching event listeners to each node.

var i,
    l,
    buttons,
    button;

function clickHandler(e) {
    console.log(this);//indicates the clicked button
}
buttons = document.getElementsByClassName('mybutton');
for (i = 0, l = buttons.length; i < l; i++) {
    button = buttons[i];
    button.onclick = clickHandler;
}

Answer 2

Forget about using document.getElementByClassName, switch to document.getElementsByClassName.

Do you see the distinction now?

It's a simple mistake to make:

document.getElementByClassName
document.getElementsByClassName
                   ^

The former is nonexistent unless specifically defined, while the latter is functional in current web browsers. getElementsByClassName will provide a node list that requires iteration for attaching event listeners to each node.

var i,
    l,
    buttons,
    button;

function clickHandler(e) {
    console.log(this);//indicates the clicked button
}
buttons = document.getElementsByClassName('mybutton');
for (i = 0, l = buttons.length; i < l; i++) {
    button = buttons[i];
    button.onclick = clickHandler;
}

Answer 3

Answer №2

Your event handler will receive a reference to the event as its first argument

var btn = document.querySelector(".myBtn");
btn.onclick = function(event) {
    //event.target is a reference to the button that was clicked
};

Answer 4

Your event handler will receive a reference to the event as its first argument

var btn = document.querySelector(".myBtn");
btn.onclick = function(event) {
    //event.target is a reference to the button that was clicked
};

Retrieve the element that was clicked by targeting its class name using JavaScript

Answer №1

Answer №2

Similar questions

I'm attempting to install the "firebase" package using npm, but I keep encountering a python-related error message during the installation process

Error: Unexpected identifier in jQuery ajax line

Adding JSON data to a table with the keys in the first row is a simple process that can be achieved

What is the method for obtaining the input value of an input type number in HTML?

Error encountered: Mocha - The property '$scope' cannot be read as it is undefined

Tips for showing ng-repeat items solely when filters are applied by the user

The synergy of Redux with scheduled tasks

Utilizing jQuery to send multiple values via an ajax request

Learn how to incorporate the dynamic array index value into an Angular HTML page

Javascript - Could anyone provide a detailed explanation of the functionality of this code snippet?

Executing synchronous animations in Jquery with callback logic

Implementing pagination within an Angular 11 Mat-table with grouping feature

Transitioning from webpack to vite with Vue.js for a Chrome extension development project

I require assistance in understanding how to successfully implement ParseINT with (row.find)

The Material UI slider vanishes the moment I drag it towards the initial element

Is there a way to prevent on-click errors in ReactJS that someone can share with me?

What is the best way to retrieve the parent element in jQuery when you already have the child element selected

Set YouTube Playlist to start from a random index when embedded

"Enhanced file manager: Elfinder with multiple buttons to seamlessly update text input fields

Tips for utilizing jQuery to display images similar to videos