JavaScript onClick Event Function

Question

I am trying to add an onClick event to the buttons I created here: https://makerlist.io/smart-feature-finder/. I am adding a "Hello, World!" statement that appears when the button is clicked to test it. Here is the code I'm using, however nothing appears. Any ideas on what I am missing?

document.getElementsByClassName(".esg-filterbutton").addEventListener("click", myFunction);

function myFunction() {
    alert ("Hello, World!");
}

Thanks,

Jonahan

Script47 · Accepted Answer · 2015-12-29 22:13:21Z

1

Your selector returns an array-like object known as a HTMLCollection not a single element.

Try,

document.getElementsByClassName("esg-filterbutton")[0].addEventListener("click", myFunction);

Notice I'm grabbing the first element in the array?

Also I removed the . before the name of the class. As you are specifying that you want to select a class in the function, you don't need to put a ..

edited Dec 29, 2015 at 22:13

answered Dec 29, 2015 at 22:09

Script47

14.6k4 gold badges49 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

epascarello Over a year ago

Technically it is not an array, it is a live HTMLCollection.

Script47 Over a year ago

@epascarello It is an array-like object. Array is merely my way of explaining it in layman's terms. Thanks for the link though.

Jonathan Hartman Over a year ago

Works! Thanks @Script47.

Chiwda Over a year ago

But what if I want to assign a function to all elements of the class, not just the first one? How do I do that?

DinoMyte · Accepted Answer · 2015-12-29 22:20:18Z

0

You can bind a click event to the element with class esg-filterbutton if you wish to apply the event to all your buttons.

$('.esg-filterbutton').click(function()
{
    alert ("Hello, World!");
});

Here's an example : https://jsfiddle.net/DinoMyte/Lb1wj47j/

answered Dec 29, 2015 at 22:20

DinoMyte

8,8781 gold badge21 silver badges27 bronze badges

Collectives™ on Stack Overflow

JavaScript onClick Event Function

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related