如何使用onclick函数在没有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);
    }
}

Answer 1

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

Answer 2

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