十进制转二进制JS/HTML转换器输出含undefined问题求助

问题描述 #

我用JS和HTML开发一款十进制转二进制转换器，开发已接近完成，但代码运行时输出结果总会附带undefined。例如输入数字9，得到的输出为：0bundefined1001。请问该undefined出现的原因是什么？如何消除它？

原JS代码 #

// NECESSARY VARIABLES DEFINED
let decimalNum; // User's input
let binaryNum; // (soon) converted decimalNum
let x = 0; // explained in the algorithm 

// THIS FUNCTION CHECKS WHETHER THE USER'S INPUT IS A NATURAL NUMBER
function is_Natural(n) {
  if (typeof n !== 'number')
    return 'Not a number';
  return (n > 0) && (Math.floor(n) === n) && n !== Infinity;
}

// THIS SECTION CONVERTS THE USER'S INPUT TO THE BINARY SYSTEM
document.getElementById("mySubmit").onclick = function() {
  decimalNum = document.getElementById("decimalNum").value; //retrieves the user's input and stores it in the previously defined variable
  decimalNum = Number(decimalNum)
  if (is_Natural(decimalNum) === true) {
    while (true) {
      if (decimalNum < 2 ** x) {
        x = x - 1 // For it to let the left-most value be equal to 1
        break
      } else {
        x = x + 1
      }
    }
    while (true) {
      if (decimalNum >= 2 ** x) {
        binaryNum = binaryNum + '1';
        decimalNum = decimalNum - 2 ** x;
        x = x - 1
      } else {
        binaryNum = binaryNum + '0'
        x = x - 1
      }
      if (x < 0) {
        break
      } else {
        continue
      }
    }
  }
  document.getElementById("binaryNum").textContent = `Here is your number in the Binary system: 0b${binaryNum}`; // replaces the placeholder
}

原HTML代码 #

<h1> Converter from Decimal to Binary</h1>
<label for="decimalNum" title="A positive whole number (1, 2, 3, etc.), excluding 0 and inifinity."> Decimal (natural number) </div>: </label>
<input id="decimalNum" type="number">
<button id="mySubmit"> Submit </button>
<p id="binaryNum"> </p>
<!-- Placeholder for the printed form in the Binary system.-->
<i> Please note that the <b>0b</b> index in the Binary number is a prefix to indicate its system.</i>

问题原因 #

1. binaryNum未初始化：你只声明了let binaryNum;但未设置初始值，变量默认值为undefined。第一次执行binaryNum = binaryNum + '1'时，会把undefined和字符串拼接，转成字符串"undefined"直接出现在输出里。
2. 全局变量x未重置：x是全局变量，第一次点击按钮后会保留上次计算值，再次点击时基于旧值计算，导致后续转换逻辑出错。
3. 非法输入无处理：当输入不是自然数时，binaryNum仍为undefined，输出会直接显示0bundefined。

解决办法 #

1. 初始化binaryNum为空字符串 #

把全局声明的let binaryNum;改成let binaryNum = '';，第一次字符串拼接时就是空串加字符，不会出现undefined。

2. 将x改为点击事件内的局部变量 #

每次点击按钮时重新初始化x，避免残留值影响计算。在点击函数的if (is_Natural(decimalNum) === true)块内，先声明let x = 0;。

3. 处理非法输入场景 #

当输入不合法时，给输出区域设置提示文本，避免显示0bundefined。

修改后的完整JS代码 #

// NECESSARY VARIABLES DEFINED
let decimalNum; // User's input
let binaryNum = ''; // 初始化空字符串
// 移除全局x，改为局部变量

// 检查输入是否为自然数
function is_Natural(n) {
  if (typeof n !== 'number')
    return 'Not a number';
  return (n > 0) && (Math.floor(n) === n) && n !== Infinity;
}

// 转换逻辑
document.getElementById("mySubmit").onclick = function() {
  decimalNum = document.getElementById("decimalNum").value;
  decimalNum = Number(decimalNum);
  binaryNum = ''; // 每次点击重置结果变量
  const validationResult = is_Natural(decimalNum);
  
  if (validationResult === true) {
    let x = 0; // 局部变量，每次点击初始化
    while (true) {
      if (decimalNum < 2 ** x) {
        x = x - 1;
        break;
      } else {
        x = x + 1;
      }
    }
    while (true) {
      if (decimalNum >= 2 ** x) {
        binaryNum += '1';
        decimalNum -= 2 ** x;
        x--;
      } else {
        binaryNum += '0';
        x--;
      }
      if (x < 0) break;
    }
    document.getElementById("binaryNum").textContent = `转换结果（二进制）：0b${binaryNum}`;
  } else {
    // 非法输入提示
    const errorMsg = validationResult === 'Not a number' ? '请输入有效的数字' : '请输入大于0的正整数';
    document.getElementById("binaryNum").textContent = errorMsg;
  }
}

修改后的HTML代码（修正标签错误+汉化） #

原HTML里的label标签多了一个</div>，顺便修正并汉化：

<h1>十进制转二进制转换器</h1>
<label for="decimalNum" title="正整数（1、2、3等），不包含0和无穷大">十进制（自然数）：</label>
<input id="decimalNum" type="number">
<button id="mySubmit">转换</button>
<p id="binaryNum"></p>
<!-- 二进制结果占位符 -->
<i>请注意：二进制数前的<b>0b</b>是表示该数为二进制的前缀。</i>

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