Изменение getElementById на код разрыва getElementsByClassName

Question

Итак, у меня есть этот рабочий код

<details>Hello World<summary>summary</summary>lost</details>
<details>another<summary>good night moon</summary>find me</details>

<button id="expand" onclick="openAll()">Expand All +</button>

var elems = document.getElementsByTagName("details");

function openAll() {
  for (var i = 4; i <= 31; i++){
    elems[i].setAttribute("open", "true");
  }
  document.getElementById("expand").setAttribute( "onClick", "javascript: closeAll();" );
  document.getElementById("expand").innerHTML = "Collapse All -";
}

function closeAll() {
  for (var i = 4; i <= 31; i++){
    elems[i].removeAttribute("open");
  }
  document.getElementById("expand").setAttribute( "onClick", "javascript: openAll();" );
  document.getElementById("expand").innerHTML = "Expand All +";
}

Теперь я решил, что хочу добавить вторую кнопку, поэтому я изменил getElementById в getElementsByClassName так что я

<details>Hello World<summary>summary</summary>lost</details>
<details>another<summary>good night moon</summary>find me</details>
<button class="expand" onclick="openAll()">Expand All +</button>
<button class="expand" onclick="openAll()">another Expand All +</button>

var elems = document.getElementsByTagName("details");

function openAll() {
  for (var i = 4; i <= 31; i++){
    elems[i].setAttribute("open", "true");
  }
  document.getElementsByClassName("expand").setAttribute( "onClick", "javascript: closeAll();" );
  document.getElementsByClassName("expand").innerHTML = "Collapse All -";
}

function closeAll() {
  for (var i = 4; i <= 31; i++){
    elems[i].removeAttribute("open");
  }
  document.getElementsByClassName("expand").setAttribute( "onClick", "javascript: openAll();" );
  document.getElementsByClassName("expand").innerHTML = "Expand All +";
}

При первом щелчке код расширяет все, но не изменяет текст и не разрушается. Что мне не хватает?

Answer 1

Ваш for цикл повторяется 31-4=27 раз, хотя у вас есть только два details тег. getElementsByClassName возвращает коллекцию. Если вы хотите работать с предметами из коллекции, вы должны использовать индекс. Попробуйте следующий код:

var elems = document.getElementsByTagName("details");

function openAll() {
  for (var i = 0; i < elems.length; i++){
    elems[i].setAttribute("open", "true");
  }
  var buttons = document.getElementsByClassName("expand");
  for (var i = 0; i < buttons.length; i++){
    document.getElementsByClassName("expand")[i].setAttribute( "onClick", "javascript: closeAll();" );
    document.getElementsByClassName("expand")[i].innerHTML = "Collapse All -";
  }
}

function closeAll() {
  for (var i = 0; i <elems.length; i++){
    elems[i].removeAttribute("open");
  }
  var buttons = document.getElementsByClassName("expand");
  for (var i = 0; i < buttons.length; i++){
    document.getElementsByClassName("expand")[i].setAttribute( "onClick", "javascript: openAll();" );
    document.getElementsByClassName("expand")[i].innerHTML = "Expand All +";
  }
}

<button class="expand" onclick="openAll()">Expand All +</button>
<button class="expand" onclick="openAll()">another Expand All +</button>

<details>Hello World<summary>summary</summary>lost</details>
<details>another<summary>good night moon</summary>find me</details>

Answer 2

getElementsByClassName Метод возвращает коллекцию элементов, поэтому вам необходим цикл для взаимодействия с каждым отдельным элементом.

var exp = document.getElementsByClassName("expand");
for (var i = 0; i < exp.length; i++) {
  exp[i].setAttribute( "onClick", "javascript: closeAll();" );
  exp[i].innerHTML = "Collapse All -";
}

И сделать то же самое для другой функции тоже.

Кроме того, я думаю, что лучше не устанавливать атрибут для onclick, а вместо этого назначать функцию непосредственно свойству.

Поэтому в цикле измените эту строку.

  exp[i].onclick = closeAll; // No parentheses!

Answer 3

Другая проблема связана с циклом for, который вы повторяете с помощью: for (var i = 4; i <= 31; i++){
Но вы хотите перебрать количество элементов: var i = 0; i < elems.length; i++ http://jsbin.com/wisepiduwu/edit?html,js,console,output

Предыдущий ответ -> частично неправильно понял вопрос:
С getElementById вы получаете ссылку на HtmlElement -> ID должен быть уникальным, чтобы вы получили один элемент.

Атрибут id указывает уникальный идентификатор своего элемента (ID). Значение должно быть уникальным среди всех идентификаторов в домашнем поддереве элемента и должно содержать хотя бы один символ. Значение не должно содержать пробелов.

https://www.w3.org/TR/2011/WD-html5-20110525/elements.html

getElementById https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

Возвращает ссылку на элемент по его идентификатору; идентификатор - это строка, которая может использоваться для идентификации элемента; это может быть установлено с помощью атрибута id в HTML или из скрипта.

ByClassName getElements https://developer.mozilla.org/en/docs/Web/API/Document/getElementsByClassName

Возвращает похожий на массив объект всех дочерних элементов, которые имеют все заданные имена классов. При вызове объекта документа выполняется поиск всего документа, включая корневой узел. Вы также можете вызвать getElementsByClassName() для любого элемента; он будет возвращать только элементы, которые являются потомками указанного корневого элемента с заданными именами классов.

Из-за того, что у вас есть 2 элемента с классом "расширения", вы должны использовать для, чтобы перебрать этот массив.

Привет:)