JavaScript编写猜数字概率游戏时if语句未进入else分支问题求助

故障原因 #

你代码的问题出在数据类型不匹配：

• 输入框获取的guessOne、guessTwo是字符串类型，生成的随机数randomNum是数字类型
• 首个判断条件使用的严格不等运算符!==会同时校验值和类型，哪怕输入的内容和随机数的数值完全一致，类型不同也会被判定为不相等，直接触发失败提示。

修复方案 #

推荐优先统一数据类型，在获取输入值时直接转为数字，同时可以增加输入有效性校验避免空提交/非法输入的问题，修改后的JS代码如下：

let guessOne = ''
let guessTwo = ''

const guessOneCheck = (g1) => {
  // 把输入的字符串转为数字
  guessOne = Number(g1.value)
  console.log(g1.value)
}

const guessTwoCheck = (g2) => {
  // 把输入的字符串转为数字
  guessTwo = Number(g2.value)
  console.log(g2.value)
}

const bothWrong = () =>{
  let randomNum = Math.floor((Math.random() *10) + 1);
  console.log(randomNum)
  // 输入合法性校验
  if(isNaN(guessOne) || isNaN(guessTwo) || guessOne <1 || guessOne>10 || guessTwo <1 || guessTwo>10){
    document.getElementById('guessAnswer').innerHTML = '请输入1-10之间的有效数字！';
    return
  }

  if(guessOne !== randomNum && guessTwo !== randomNum){
    document.getElementById('guessAnswer').innerHTML = 'HaHa you lose better luck next time!! My number was' + ' ' + randomNum;
  } else if(guessOne == randomNum || guessTwo == randomNum){
    document.getElementById('guessAnswer').innerHTML = 'What! No you cheated, or omg are you a psychic!!! My number was' + ' ' + randomNum;
  }
}

你也可以选择把首个判断的!==换成普通不等!=临时解决问题，但统一数据类型的方案可维护性更高，后续不会出现其他隐式类型转换的隐患。

内容的提问来源于stack exchange，提问作者Michael-H