HTML. CSS, JS Почему не все div c текстом выводится?

Question

function toggle(imgElem, divId) {

  if(document.getElementById) {

    var divElem = document.getElementById(divId);

    if(divElem.className == "closed") {
        divElem.className = "1 ";
         document.getElementById("linkname").innerText = '1 ';
    } else {
        divElem.className = "2 ";
        divElem.className = "closed";
        document.getElementById("linkname").innerText = '1 ';
    }
  }

}

 .closed {
      display:none;

      

    }

      .class_1{
    text-decoration: none;
    padding-left: 30px;
    padding-right: 30px;
    }

    .class_2{
    text-decoration: none;
    padding-left: 30px;
    padding-right: 30px;
    }

<link rel="stylesheet" type="text/css" href="1.css">
<div   class="sidebar">

    <h2 class="h2">!!!</h2>
        <div class="test">
            <hr class="hh1">
          <a class="class_1" href="#" id="linkname" onclick="toggle(this,'openbox_1')">1 </a>
          <a class="class_2" href="#" id="linkname" onclick="toggle(this,'openbox_2')">2 </a>
        </div>
</div>

<section class="section">
          <div class="closed" id="openbox_1" >text_1</div>
          <div class="closed" id="openbox_1" >text_1.1</div>
          <div class="closed" id="openbox_1" >text_1.2</div>

          <div class="closed" id="openbox_2" >text_2</div>
</section>

<script src="./1.js"></script>

Всем доброго времени суток!

Надоумьте пожалуйста, почему text_1.1 и text_1.2 не выводится после нажатия на "1" ? А выводится только первая запись ("text_1")

Буду рад любой помощи :)))

Answer 1

Так как есть правило что id на странице не может повторятся, у вас селектор id даже про это говорит getElementById а не elementS, скрипт нашел первое совпадение и все

сравните запись getElementsByClassName и getElementById в классах elementS возварщает HTMLCollection а ID возвращает сразу элемент

Тоже самое но по классам:

function toggle(elements) {

    var divElem = document.querySelectorAll(elements);
    divElem.forEach((e)=>{
      e.classList.toggle('closed')
    })
}

.closed {
      display:none;
  }
  .class_2, .class_1{
    text-decoration: none;
    padding-left: 30px;
    padding-right: 30px;
  }

<div   class="sidebar">

    <h2 class="h2">!!!</h2>
        <div class="test">
            <hr class="hh1">
          <a class="class_1" href="#" id="linkname01" onclick="toggle('.openbox_1')">1 </a>
          <a class="class_2" href="#" id="linkname02" onclick="toggle('.openbox_2')">2 </a>
        </div>
</div>

<section class="section">
          <div class="closed openbox_1">text_1</div>
          <div class="closed openbox_1">text_1.1</div>
          <div class="closed openbox_1">text_1.2</div>

          <div class="closed openbox_2">text_2</div>
</section>

Так же у вас повторяется id linkname что тоже недопустимо

БЛОГ НА HUSL

HTML. CSS, JS Почему не все div c текстом выводится?

Ответы (1 шт):