将 id 添加到 children 并将它们存储为数组以列出

Question

我有不同的没有 id 的按钮，如下所示：

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

我无法通过 .button 访问它们，因为我有很多，比如 20 个左右。我可以通过它们的 data-note 属性访问它们吗？ querySelector select第一个，第二个或全部。我可以具体 select 他们，也许给他们一个 ID？

我真正想要的是将 data-note 存储为数组，因此必须将该数据转换为数组作为列表以添加到 HTML。

我想没有id也可以吗？
我可能必须为每个按钮创建一个函数，通过单击它们，它会将信息作为数组存储到一个列表中，如果被调用，我可以稍后访问该列表，但我不知道如何 select 这些 child仁。如果可能的话，不是通过节点列表编号，而是通过数据，或者如果通过节点列表，那么。

这可能是一个问题，具体取决于浏览器，因为它们计算 0,1,2 或 1,3,5...是否可以使用 getElementById 和 select 特定数字child？

为了addEventListener我需要select每一个按钮。

Answer 1

如果你只是想要无序列表中的笔记数据，那么你可以执行以下操作：

// 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>

Answer 2

示例输出：

步骤：

1) 使用 getElementsByTagName 将所有按钮存储到一个数组中

2) 使用for循环遍历数组

3) 使用setAttribute 设置所有按钮的id

4) 根据需要使用 allButtons 数组，因为它已经包含所有按钮，并设置了它们的 ID。

代码:

  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>

Answer 3

这可以通过

轻松完成

var myNodes = document.querySelectorAll("button[data-note]");

这会将包含 data-note 的所有按钮分配给 myNodes。创建的数组元素的属性之一是“属性”，因此您可以使用 .find

轻松搜索它们

注意：我看到你实际上是在尝试按顺序记录点击次数，就像西蒙游戏一样。在这种情况下，您应该在页面上有一个隐藏的 div 来存储数据，让每次点击都调用您的事件，并且该事件从传入的 e 对象中获取相关控件的 data-note 到函数。您可以根据需要为控件分配任意数量的点击事件，它们将以相反的顺序执行，最后添加的先运行。

将 id 添加到 children 并将它们存储为数组以列出

Add id to children and store them as array to list

javascript

children

parent-child