javascript - 为什么 document.getElementsByClassName 除了第一次之外没有准确获取所有元素？

Question

我有一个包含 n 个项目的数组，我循环这些项目来创建 n 个输入按钮。每个输入按钮都有 onclick 函数 typeItem() ，它将单击的 Item 添加到新数组 typedItem[] 中，并使该单击的项目隐藏并为其赋予一个新类 单击。

然后我有一个带有 onclick 函数 undo() 的上部按钮，它应该删除隐藏属性并使这些单击的项目再次可见。我使用 document.getElementsByClassName 方法来获取元素，但除了第一次之外，它不会获取所有单击的元素。

当我随机单击超过 5 个项目并触发 undo() 函数时，并非所有单击的元素都会再次出现。它错过了一个或多个按钮，尤其是在重新加载页面后第二次...

为什么会发生这种情况以及如何解决？ ...

var arr = ["can", "san", "tan", "ban", "man", "yan", "fan", "van", "zan", "ran", "xan", "gan"];
for (i = 0; i < arr.length; i++) {
  document.getElementById('dv').innerHTML += "<input type='button' class='button' onclick='typeItem(this.value,this.id)' value='" + arr[i] + "'>";
  document.getElementsByClassName('button')[i].id = "id" + i;
}

var typedItems = [];

function typeItem(val, idd) {
  document.getElementById(idd).style.visibility = 'hidden';
  document.getElementById(idd).classList.add('clicked');
  typedItems.push(val);
}

function undo() {
  for (t = 0; t < typedItems.length; t++) {
    document.getElementsByClassName("clicked")[t].style.visibility = 'visible';
  }
  typedItems = [];
};

* {
  text-align: center
}

input,
button {
  margin: 3px;
  width: 23%;
  height: 50px;
}

<button style="background:orange" onclick="undo()">UnDo Button</button>

<br><br><br>

<p id="dv"></p>

<br>
<p id="dvv"></p>

Answer 1

undo() 函数假定 typedItems 中的元素对应于 clicked 类的元素。

第一次调用 undo() 时确实如此。如果点击n次，数组中就会有n个带有class="clicked"的元素和n个元素,.

但下次就不会了。 undo() 清空数组，但它不会删除任何 clicked 类，它只是使单击的元素可见。

因此，如果您单击 3 个元素，单击撤消按钮，然后单击 3 个不同的元素并再次单击撤消按钮，则将使具有 clicked 类的前 3 个元素可见。但这些不一定是您第二次单击的 3 个元素。 document.getElementsByClassName() 按元素在 DOM 中出现的顺序返回元素，而不是按添加类的顺序。

您可以使用类循环遍历元素，而不是循环遍历 typedItems。

function undo() {
    document.querySelectorAll(".clicked").forEach(el => el.style.visibility = "visible");
}