JS点击事件监听异常：点击按钮无法恢复显示隐藏的按钮

问题描述 #

我刚学习JS，遇到代码运行问题：我实现了三个带有.option类的按钮，点击它们会隐藏；现在想要通过点击带有.button类的按钮，让这些隐藏的按钮重新显示，但当前代码无法实现该功能。

原代码 #

JavaScript代码

let optionClick = document.querySelectorAll('.option');
for (let i = 0; i < optionClick.length; i++) {
  optionClick[i].addEventListener("click", function () {
    this.style.display = "none";
  });
}

let showOptions = document.querySelector(".button");
showOptions.addEventListener("click", function () {
  optionClick.style.display = "block";
});

HTML代码

<div class="app">
  <div class="white">
    <img class="marker" src="marker.png" />
    <img class="wheel" src="wheel.png" />
    <img onclick="myFunction()" class="button" src="button.png" />
  </div>
</div>

<div class="congratulation hidden">
  <button onclick="closeWindow()" class="close-window">X</button>
  <h2>Congratulation!</h2>
  <h4>Choose your prize:</h4>
  <button class="option">
    <p>x</p>
  </button>
  <button class="option">
    <p>x</p>
  </button>
  <button class="option">
    <p>x</p>
  </button>
</div>

错误原因 #

1. NodeList无法直接设置样式：document.querySelectorAll('.option')返回的是NodeList集合（类似数组的元素集合），不是单个DOM元素。直接给optionClick.style.display = "block"没有任何效果，必须遍历集合中的每个元素单独设置样式。
2. 容器默认隐藏的潜在问题：.congratulation容器带有hidden类，默认处于隐藏状态，即使修复了按钮的显示逻辑，这个容器不显示的话，用户还是看不到按钮。

修正后的代码 #

JavaScript代码

let optionClick = document.querySelectorAll('.option');
for (let i = 0; i < optionClick.length; i++) {
  optionClick[i].addEventListener("click", function () {
    this.style.display = "none";
  });
}

let showOptions = document.querySelector(".button");
showOptions.addEventListener("click", function () {
  // 遍历所有.option元素，逐个恢复显示
  optionClick.forEach(option => {
    option.style.display = "block";
  });
  // 显示包含按钮的容器（移除hidden类）
  document.querySelector('.congratulation').classList.remove('hidden');
});

说明 #

• 使用forEach遍历optionClick集合，对每个.option元素单独设置style.display = "block"，实现批量恢复显示。
• 添加了移除.congratulation容器的hidden类的逻辑，确保容器本身能被用户看到，按钮才会显示在页面上。

内容的提问来源于stack exchange，提问作者user20736360