如何仅使用JavaScript获取被点击按钮的value值设置游戏回合上限

问题原因 #

• 选择器写法错误：你使用的.game-type buttons是无效选择器，button元素没有复数形式的标签名，正确的选择器应该是.game-type button
• 没有对获取到的value做类型转换：button的value默认是字符串类型，后续和数字类型的roundCount做比较时最好提前转成数值类型，避免隐式类型转换带来的问题
• 注意要调用rpsGame函数完成初始化，否则内部的事件绑定逻辑不会执行

修正后的JS代码 #

const rpsGame = () => {
  let playerScore = 0;
  let computerScore = 0;
  let roundCount = 0;
  let roundLimit = 0;

  //pick number of rounds to play
  const roundNum = () => {
    // 修正选择器
    const roundSelector = document.querySelectorAll(".game-type button");
    roundSelector.forEach(btn => {
      btn.addEventListener("click", function () {
        // 转数字后赋值给roundLimit
        roundLimit = Number(this.value);
        console.log("设定的回合上限：", roundLimit);
        // 这里可以补充你需要的后续逻辑，比如隐藏选择面板、启动游戏流程等
      });
    });
  };
  roundNum();

  // 后续游戏逻辑部分，每次回合结束判断 roundCount === roundLimit 即可触发游戏结束逻辑
}
// 不要忘记调用rpsGame函数完成初始化
rpsGame();

额外优化建议 #

• 可以用事件委托代替给每个button单独绑定事件，减少内存占用：直接给父级.game-type绑定点击事件，判断点击目标是button的时候再取值即可，后续新增按钮也不需要重新绑定事件
• 可以给选中的按钮加高亮样式，提升用户体验
• 回合上限设定后可以把选择面板隐藏，避免用户中途切换回合数导致逻辑混乱

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