How To Use An onclick Function To Check Class Name Without jQuery

Question

I am looking to check if a element has a class name on click. I have the click event calling the function but nothing logs to the console. Interestingly, document.write works but no matter what I click, it logs the else even if the HTML element has the class name.

HTML

<p>What is 2+2?</p>
<a href="#" class="answer wrong">5</a>
<a href="#" class="answer correct">4</a>
<a href="#" class="answer wrong">7</div>
<a href="#" class="answer wrong">2</div>

CSS

var wrongMsg = "Sorry, that's not the answer"
var correctMsg = "Correct!"
var answers = document.getElementsByClassName("answer");

for (var i=answers.length; i--;){
    answers[i].addEventListener('click', checkMulti);
};

function checkMulti(){
    if ( this.className == "correct" ){
        console.log(correctMsg);
    }else{
        console.log(wrongMsg);
    }
}

That's because className gets the class attribute value. So it would be "answer correct" rather than just "correct". Instead you will want to see if it's in the classList or split by space the className property (since this is better supported). — Spencer Wieczorek
– Spencer Wieczorek, Commented Feb 14, 2018 at 21:47

Ele · Accepted Answer · 2018-02-14 21:46:49Z

3

You need to use the method contains from classList.

var wrongMsg = "Sorry, that's not the answer"
var correctMsg = "Correct!"
var answers = document.getElementsByClassName("answer");

for (var i = answers.length; i--;) {
  answers[i].addEventListener('click', checkMulti);
};

function checkMulti() {
  if (this.classList.contains("correct")) {
    console.log(correctMsg);
  } else {
    console.log(wrongMsg);
  }
}

<p>What is 2+2?</p>
<a href="#" class="answer wrong">5</a>
<a href="#" class="answer correct">4</a>
<a href="#" class="answer wrong">7</div>
<a href="#" class="answer wrong">2</div>

Resource

Element.classList

answered Feb 14, 2018 at 21:46

Ele

33.8k7 gold badges43 silver badges80 bronze badges

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

Comments

Varinder · Accepted Answer · 2018-02-14 21:47:24Z

0

I believe correct approach would you to look for correct classname in element's classList property

like so: this.classList.contains("correct");

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

answered Feb 14, 2018 at 21:47

Varinder

2,6641 gold badge18 silver badges20 bronze badges

Collectives™ on Stack Overflow

How To Use An onclick Function To Check Class Name Without jQuery

2 Answers 2

Resource

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Resource

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related