HTML按钮多次点击触发函数及随机取值不变bug修复咨询

问题原因 #

代码的核心错误出在JavaScript判断语句的运算符使用错误：

• 单等号=是赋值运算符，if (foodNum = 1)的执行逻辑是先把foodNum强制赋值为1，再判断1的布尔值（属于真值），所以if条件永远成立，每次都返回泰国菜，多次点击结果自然不会变化。

HTML部分逻辑正常，无需修改。

修正方案 #

只需要把判断语句里的赋值运算符=替换为严格相等比较运算符===即可，===会同时校验值和数据类型是否一致，是前端开发判断相等的优先选择。

修正后的完整JavaScript代码 #

function foodPicker(){
  let foodNum = Math.floor(Math.random() * 2)
  let result = ''
  if (foodNum === 1) {
    result = 'Thai';
  } else {
    result = 'Viet';
  }
  document.getElementById('food').innerHTML = result;
}

修改后重新运行即可正常随机返回两种菜品结果。

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