Использование Array внутри getElementsByClassName ()

Question

Я новый в javaScript, и я пытался скрыть несколько div, запустив функцию.div существуют, они называются test1 до test8.каждый раз, когда я активирую функцию, она выдает ошибку document.getElementsByClassName(...).style is undefined

вот мой код

var divs = ["test1", "test2", "test3", "test4", "test5", "test6", "test7", "test8"];
for (var i=0; i<divs.length; i++)  {
  document.getElementsByClassName(divs[i]).style.display = "none";
  }

HTML

  <div class="test1">
    <p>Hi 1</p>
  </div>
  <div class="test2">
    <p>Hi 2</p>
  </div>
  <div class="test3">
    <p>Hi 3</p>
  </div>
  <div class="test4">
    <p>Hi 4</p>
  </div>
  <div class="test5">
    <p>Hi 5</p>
  </div>
  <div class="test6">
    <p>Hi 6</p>
  </div>
  <div class="test7">
    <p>Hi 7</p>
  </div>
  <div class="test8">
    <p>Hi 8</p>
  </div>

После прочтения дублирующего вопроса я попробовал это:

function cleardiv() { 
    var divs = ["test1", "test2", "test3", "test4", "test5", "test6", "test7", "test8"]; 
    var elems = document.getElementsByClassName(divs[i]); 
    for (var i = 0; i<elems.length; i++) { 
        elems[i].style.display = 'none'; 
    } 
}

Answer 1

Когда вы добавили цикл над элементами в классе, вы удалили цикл над именами классов.Вам нужны вложенные циклы, чтобы получить все.

function cleardiv() { 
    var divs = ["test1", "test2", "test3", "test4", "test5", "test6", "test7", "test8"]; 
    for (var j = 0; j < divs.length; j++) {
        var elems = document.getElementsByClassName(divs[j]); 
        for (var i = 0; i<elems.length; i++) { 
            elems[i].style.display = 'none'; 
        } 
    }
}

Вы также можете сделать это с помощью одного цикла, используя querySelectorAll.

function cleardiv() {
    var elems = document.querySelectorAll(".test1,.test2,.test3,.test4,.test5,.test6,.test7,.test8");
    for (var i = 0; i<elems.length; i++) { 
        elems[i].style.display = 'none'; 
    } 
}