Using a class name for a JavaScript 'if event.target'

Question

Is it possible to use a JavaScript document.getElementsByClassName variable in an if statement with event.target?

I want to achieve something like this:

var signInModals = document.getElementsByClassName("signInModal");

if (event.target == signInModals) {
        alert("It worked!");
}

Thank you!

Wouldn't it be easier to just check if the `event.target` element has that class? — Guy Incognito, Dec 16 '20 at 18:15
`getElementsByClassName` returns an `HTMLCollection`, so it will never be the same as `event.target` — blex, Dec 16 '20 at 18:16
https://stackoverflow.com/questions/5898656/check-if-an-element-contains-a-class-in-javascript — Guy Incognito, Dec 16 '20 at 18:18
This seems like XY problem (https://xyproblem.info/). As the best question is what are you trying to accomplish with this code? — imvain2, Dec 16 '20 at 18:25

epascarello · Accepted Answer · 2020-12-16T18:25:12.830

5

You are trying to compare an HTML collection to an element. That is never going to work. You would need to loop over the HTML Collection and check each one.

Seems like you are trying to see if an element has a class so just check for the class.

if(evt.target.classList.contains("signInModal"))

other option is to check to see if it is a parent (depending on what evt is)

if(evt.target.closest(".signInModal"))

edited Dec 16 '20 at 18:25

answered Dec 16 '20 at 18:20

epascarello

204,599
20
195
236

1

`if ( evt.target.matches('.signInModal') )` – Mister Jojo Dec 16 '20 at 18:25

score 0 · Answer 2 · answered Dec 16 '20 at 18:20

Well, event is a reference to the Object itself, not its value. So you are saying is this Object that is clicked this Object that I got from the class name. The answer will always be false. So to answer your question yes it is, but it does not make sense to do that, you probably want to check if a property matches.

For example: when this button is clicked change the button color to the same color has this Html object, and then you can use the if statement to say if (button color == html object color) alert("It worked")

Using a class name for a JavaScript 'if event.target'

2 Answers2