JS按钮点击绑定带参函数不触发 控制台测试正常问题排查

你的代码点击无响应不是事件绑定逻辑的问题，两个低级错误导致功能异常：

1. 所有条件判断里误用了位运算符&，应该用逻辑与&&，位运算会打乱条件判断逻辑，运行时报错中断
2. 函数执行后的返回值没有任何输出逻辑，就算代码跑通了，控制台和页面都看不到结果，自然会误以为点击没反应
   另外你Paper按钮的id写漏了字母，是papertn不是paperbtn，根本选不到对应DOM元素。

要实现点击触发playRound('rock')这类预传参函数，不需要额外写playRock这种中转函数，三种常用写法任选即可：

• 匿名函数包裹（最推荐，可读性最好）
  直接在回调位置写匿名函数，在函数内部调用带参逻辑，逻辑清晰不容易出问题：

  const rockbtn = document.querySelector('#rockbtn');
  rockbtn.addEventListener('click', function() {
    const roundResult = playRound('rock');
    // 一定要加输出逻辑，不然看不到执行效果
    console.log(roundResult);
    // 如果要显示在页面上就往DOM里写，比如document.querySelector('#result').textContent = roundResult
  });
  

  用箭头函数写更简洁：

  rockbtn.addEventListener('click', () => console.log(playRound('rock')));
  

• bind预绑定参数
  用Function.prototype.bind提前给函数固定传入参数，返回的新函数直接传给事件监听即可，适合简单场景：

  // 第一个参数是函数执行时的this指向，不需要改this就传null，后面跟要固定传入的参数
  rockbtn.addEventListener('click', playRound.bind(null, 'rock'));
  

  注意：这种写法下事件对象会排在你预传参数的后面，如果回调里需要用事件对象，要注意参数顺序。
• dataset传参（适合多按钮批量绑定）
  把参数直接写在DOM的data-*自定义属性上，写一次绑定逻辑就能覆盖所有按钮，不用给每个按钮单独写回调：
  先改HTML部分的按钮：

  <button id="rockbtn" data-choice="rock">Rock</button>
  <button id="paperbtn" data-choice="paper">Paper</button>
  <button id="scissorsbtn" data-choice="scissors">Scissors</button>
  

  再写JS绑定逻辑：

  // 选中所有带data-choice属性的按钮，批量绑定
  document.querySelectorAll('button[data-choice]').forEach(btn => {
    btn.addEventListener('click', (e) => {
      // 从点击的目标按钮上拿到预存的选择参数
      const playerPick = e.target.dataset.choice;
      const roundResult = playRound(playerPick);
      console.log(roundResult);
    })
  })
  

• 所有函数内部的变量记得加const/let声明，比如computerSelection、result，不要直接赋值，不然会泄露成全局变量
• 后续写game函数的时候，不要在if判断里写赋值操作=，要写相等判断===，你注释掉的game函数里if (roundResult = outcome.includes('won'))是错误写法，应该先声明变量再做判断
• 逻辑与一律用&&，不要用单&

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