Добавить идентификатор для детей и сохранить их в виде массива в список - PullRequest
Новая
       56

Добавить идентификатор для детей и сохранить их в виде массива в список

0 голосов
/ 12 апреля 2020

У меня есть разные кнопки без идентификатора, например: 

<div id="buttons">
  <button data-note="n1">One</button>
  <button data-note="n2">Two</button>
</div>

Я не могу получить к ним доступ с помощью .button, поскольку у меня их много, например, 20 или около того. Могу ли я получить к ним доступ по их атрибуту data-note? querySelector выбирает первый, второй или все из них. Могу ли я специально выбрать их, может быть, поставить их идентификатор?

На самом деле я хочу сохранить data-note в виде массива, поэтому необходимо преобразовать эти данные в массивы в виде списка для добавления в HTML.

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

Это может быть проблемой в зависимости от браузера, так как они считают 0,1,2 или 1,3,5 ... Можно ли использовать getElementById и выбрать конкретный c номер ребенка?

К addEventListener Мне нужно выбрать каждую из кнопок.

Ответы [ 2 ]

0 голосов
/ 12 апреля 2020

Пример вывода:

enter image description here

Шаги:

1) Использование getElementsByTagName для хранения всех кнопок в массиве

2) Используйте a для l oop до l oop через массив

3) Используйте setAttribute, чтобы установить идентификаторы для всех кнопок

4) Используйте массив allButtons как * wi sh, поскольку он уже содержит все кнопки с установленными их идентификаторами.

Код: 

  var allButtons = document.getElementsByTagName("button");
  for (var i = 0; i < allButtons.length; i++) {
    allButtons[i].setAttribute("id", "button-" + [i])
  }

  console.log(allButtons);
<div id="buttons">
  <button data-note="n1">One</button>
  <button data-note="n2">Two</button>
</div>
0 голосов
/ 12 апреля 2020

Если вы просто хотите, чтобы данные заметок были в неупорядоченном списке, вы можете сделать следующее: 

// Get all the buttons
let buttons = document.getElementsByTagName("button");

// Get the "clear" button as it has a special function
let clear = buttons[buttons.length - 1];

// Create an unordered list
let ul = document.createElement("ul");

// Iterate through the buttons
for (let button of buttons) {

  // Add the event listener to each button
  button.addEventListener("click", (e) => {

    // Clear the unordered list if the clear button was pressed
    if (e.target === clear) {
      ul.innerHTML = "";
      return;
    }

    // For each button create a list item
    let li = document.createElement("li");

    // Set it's innerText attribute to be the data-note
    li.innerText = `${button.dataset.note} - ${e.target.style.backgroundColor}`;

    // Append it to the unordered list
    ul.append(li);
  });
}

// Append the list to the body
document.body.append(ul);
button {
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  cursor: pointer;
}
<h2>Buttons Game</h2>
<p>Click the buttons to add them to the list, press clear to reset</p>
<button data-note="n1" style="background-color: red;">red</button>
<button data-note="n2" style="background-color: green;">green</button>
<button data-note="n3" style="background-color: orange;">orange</button>
<button data-note="n4" style="background-color: blue;">blue</button>
<button id="clear" style="color: black; border: 1px solid black;">clear</button>
...