I cannot get access to all desired elements using querySelectorAll

Question

So I have these three lists which I want to hide.

 <ul id="wordsb" class="wordslist" class="list1">
        <li class="list-group-item">list1</li>
        <li class="list-group-item">dancing</li>
        <li class="list-group-item">elephant</li>
      </ul>
      <ul id="wordsb1" class="wordslist" class="list2">
        <li class="list-group-item">list2</li>
        <li class="list-group-item">man</li>
        <li class="list-group-item">dog</li>
      </ul>
      <ul id="wordsb2" class="wordslist" class="list3">
        <li class="list-group-item">list3</li>
        <li class="list-group-item">plane</li>
        <li class="list-group-item">truck</li>
      </ul>

I am using the queryselectorall in order to access the ids loop through them, applying a style to each of them:

 var gameb = document.querySelectorAll("#wordsb", "#wordsb1", "#wordsb2");
for (var i = 0; i < gameb.length; i++) {
  gameb[i].style.display = "none";
}

Unfortunately, only the first list (wordsb) is hidden as desired, and the remaining two elements do not seem to be impacted. When I console.log(gameb) I found that the node list only includes wordsb, and not the other two elements. enter code here

Answer 1

querySelectorAll only takes one parameter:

var gameb = document.querySelectorAll("#wordsb, #wordsb1, #wordsb2");
for (var i = 0; i < gameb.length; i++) {
  gameb[i].style.display = "none";
}

<ul id="wordsb" class="wordslist" class="list1">
  <li class="list-group-item">list1</li>
  <li class="list-group-item">dancing</li>
  <li class="list-group-item">elephant</li>
</ul>
<ul id="wordsb1" class="wordslist" class="list2">
  <li class="list-group-item">list2</li>
  <li class="list-group-item">man</li>
  <li class="list-group-item">dog</li>
</ul>
<ul id="wordsb2" class="wordslist" class="list3">
  <li class="list-group-item">list3</li>
  <li class="list-group-item">plane</li>
  <li class="list-group-item">truck</li>
</ul>