javascript - 我的 Javascript forEach 循环与我的事件监听器相结合只能工作一次

问题描述

我正在尝试制作一个简单的游戏，玩家单击活动按钮（当前唯一可见的按钮），一旦单击，它将消失并出现一个新按钮。从我可以构建的内容来看，它可以工作但只有一次。当我单击第二个按钮时，它是静止的。我目前拥有它，因此当按钮处于活动状态时，它具有 .active 类，其中包含应用于它的各种 CSS 样式。非活动类应用了透明样式。我认为在我的 forEach 循环中，每次单击活动按钮时，它都会产生另一个随机数，将该数字添加到我的按钮 ID 以激活它，并使旧按钮处于非活动状态。我错过了什么？

lodashRandNumber = () => {
  return _.random(1, 10);
}

let activeButton = document.querySelector(`#btn${lodashRandNumber()}`);
console.log(activeButton);
activeButton.className = "active"

let visibleButtons = document.querySelectorAll('.active');


visibleButtons.forEach(button => button.addEventListener('click', (event) => {
  if (button.classList.contains('active')) {
    button.classList.remove('active');
    button.classList.add('inactive');
    let newLodashRandNumber = () => {
      return _.random(1, 10);
    }
    let newActiveButton = document.querySelector(`#btn${newLodashRandNumber()}`);
    console.log(newActiveButton);
    newActiveButton.className = "active"
  }
}))

body {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 4fr 1fr 2fr;
  background-color: #d9e4dd;
}

.inactive {
  background-color: transparent;
  opacity: 0.5;
  margin: 10px;
  padding: 50px;
  border-radius: 28px;
  color: transparent;
  border: transparent;
  font-size: 1em;
}

.active {
  background-color: #9aa39d;
  opacity: 0.5;
  margin: 83px;
  padding: 50px;
  border-radius: 28px;
  color: #433d3c;
  border: transparent;
  font-size: 2em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<button id="btn1" class="inactive">button 1</button>
<button id="btn2" class="inactive">button 2</button>
<button id="btn3" class="inactive">button 3</button>
<button id="btn4" class="inactive">button 4</button>
<button id="btn5" class="inactive">button 5</button>
<button id="btn6" class="inactive">button 6</button>
<button id="btn7" class="inactive">button 7</button>
<button id="btn8" class="inactive">button 8</button>
<button id="btn9" class="inactive">button 9</button>
<button id="btn10" class="inactive">button 10</button>

标签： javascripthtmlcss

javascript - 我的 Javascript forEach 循环与我的事件监听器相结合只能工作一次

问题描述

解决方案

推荐阅读