JavaScript中if条件判断无法正常执行问题求助

你的代码里的if判断逻辑存在两个关键错误，导致添加判断后无法输出内容：

• 判断里使用的firstnumber并非有效的JavaScript变量——它只是输入框的ID，你需要先获取输入框的值，再进行判断。
• 输入框的value属性默认是字符串类型，直接和数字0比较会导致逻辑异常，必须先转换为数字类型再做判断。

修正后的完整代码 #

JavaScript #

let a;
let no = 0; // 给变量添加声明，避免全局污染
const inputEl = document.getElementById("firstnumber"); // 用语义化变量名存储输入框元素
document.getElementById("myButton").onclick = function() {
  const inputValue = inputEl.value;
  // 先把输入值转为数字，同时校验是否为有效数字
  const num = Number(inputValue);
  if (!isNaN(num) && num >= 0) {
    a = inputValue;
    console.log(a);
    document.getElementById("fdn").innerHTML = a;
    const binaryStr = num.toString(2); // 直接用转换好的数字，无需重复转换
    console.log(binaryStr);
    document.getElementById("fbn").innerHTML = binaryStr;
  }
}

CSS #

#myButton { /* ID选择器必须加#，之前的写法无法选中按钮 */
  background-color: blue;
  color: white; /* 补充文字颜色，提升按钮可读性 */
}

HTML（无需修改） #

<div class="input">
  <label id="myText">Enter first Number</label><br>
  <input type="number" id="firstnumber"><br>
  <button type="button" id="myButton">submit</button><br>
  <label id="fdn"></label><br>
  <label id="fbn"></label>
</div>

关键修正说明 #

1. 变量规范：给所有变量添加let/const声明，避免全局变量污染，这是基础的编码规范。
2. 类型处理：先将输入值转为数字，并用isNaN校验有效性，避免用户输入非数字内容时触发错误。
3. 选择器修复：CSS中ID选择器必须以#开头，否则无法正确选中目标元素。

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