How to select one of multiple classes with JavaScript?

Question

I am making a simple calculator. All buttons have .button class attached. However, I also want the numbers to have a .number class attached and operators to have an .operator class.

Using JS to select the element, I can use this but it only works if the element has one class name (.button):

        document.body.addEventListener('click', function (e) {

        if (e.target.className === 'button') {
            document.getElementById('display').innerHTML = e.target.innerHTML;
            e.target.style.opacity = '0.9';
            setTimeout(function() {
                e.target.style.opacity = '1';
            }, 150);
        }
    });

If I add the .number class to the html elements, this stops working. I need to be able to choose all buttons using .button class OR only buttons with .number class, etc.

Is there a way to do this so that I can select elements that have more than one class name using only one class name?

No jQuery, please.

Can you create codepen or js fiddle for debugging issue easily? — Naga Sai A, Jun 12 '16 at 17:09
You're doing with your clicked button opacity things you've could easily done using `:active` in CSS — Roko C. Buljan, Jun 12 '16 at 17:12
have you tried using `classList.contains("button")` instead of `className === "button"` — Iván Nokonoko, Jun 12 '16 at 17:15
Man, the word "duplicate" has a pretty loose definition around here, doesn't it? LOL. Even if I had found that other one first, I never would have known it had the answer since I don't use jQuery. — AlwaysLearning, Jun 12 '16 at 17:35
@RokoC.Buljan Thanks for that. Don't know that much about CSS yet. — AlwaysLearning, Jun 12 '16 at 17:46

score 2 · Accepted Answer · answered Jun 12 '16 at 17:10

2

use classList's contains() method to test for existence a class on a element.

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

answered Jun 12 '16 at 17:10

Ramanlfc

8,283
1
18
24

This did the trick. Thanks. (Although giving an example here of how to change my code like Ivan did would have been more convenient.) – AlwaysLearning Jun 12 '16 at 17:39

How to select one of multiple classes with JavaScript?

1 Answers1