classList.contains 返回 false 期待 true [暂停]

Question

In this codepen I am trying to check if an element has an id and then check if the element contains a class. I have a list element that has an id of 'clarinet' and a class of 'wind woodwind'. However, my function returns false. Why? and How can I do this only using getElementById and classList.contains(someClass)? Thank you.

 function has(id, someClass) { // Write - Your - Code var elem = document.getElementById(id); return classList.contains(someClass); } // id = "clarinet" class="wind woodwind" document.write(has('clarinet', 'wind woodwind') );

 <div> <h1>Some musical instruments</h1> <ul> <li id="clarinet" class="wind woodwind"> The <a href="https://en.wikipedia.org/wiki/Clarinet">clarinet</a> </li> <li id="saxophone" class="wind woodwind"> The <a href="https://en.wikipedia.org/wiki/Saxophone">saxophone</a> </li> <li id="trumpet" class="wind brass"> The <a href="https://en.wikipedia.org/wiki/Trumpet">trumpet</a> </li> <li id="violin" class="chordophone"> The <a href="https://en.wikipedia.org/wiki/Violin">violin</a> </li> </ul> </div>

Answer 1

You can try this

 function has(id, someClass){ // Write - Your - Code var elem = document.querySelector(`${id}${someClass}`); console.log(elem); return elem? true: false; } // id = "clarinet" class="wind woodwind" document.write(has('#clarinet', '.wind.woodwind'));

 <div> <h1>Some musical instruments</h1> <ul> <li id="clarinet" class="wind woodwind"> The <a href="https://en.wikipedia.org/wiki/Clarinet">clarinet</a> </li> <li id="saxophone" class="wind woodwind"> The <a href="https://en.wikipedia.org/wiki/Saxophone">saxophone</a> </li> <li id="trumpet" class="wind brass"> The <a href="https://en.wikipedia.org/wiki/Trumpet">trumpet</a> </li> <li id="violin" class="chordophone"> The <a href="https://en.wikipedia.org/wiki/Violin">violin</a> </li> </ul> </div>