Question

绝对的初学者，并尝试创建一个非常简单的十进制到二进制转换器。我知道JavaScript内置了一些更简便的方法，可以转换为不同的数字基数，但是我喜欢从头开始创建自己的脚本。这是代码：

<!DOCTYPE html>
<html>
<head>
  <title>GetBit</title>
</head>
<body>

  <h1>Decimal to Binary</h1>
    <p><input type="number" min="0" id="decimal"</p>
    <button type="button" onclick="getBit()">Submit</button>
    <p>here is your answer:</p><p id="binary"></p>


<script>
function getBit() {
  var n = document.getElementById("decimal").value;
  if (n >= 2) {
    bit = (n % 2) + "" + bit;
    return getBit(n = Math.floor(n/2), bit)
  } else {
    bit = 1 + "" + bit;
    return bit
  }
  var bit = document.getElementById("binary").innerHTML;
}


</script>
</body>
</html>

我确定这是残酷的代码，但是我正在大火尝试。实际上，总的来说，我想更好地了解用户输入和Javascript函数是如何交互的，以及将用户输入放入变量，然后使用这些值输出新值的最佳实践（例如，采用十进制数并输出二进制）。

我已经在控制台中测试了我的getBit（）函数，它返回了正确的二进制文件。我为HTML稍作更改。这是起作用的原始JS：

function getBit(n, bit = "") {
  if (n >= 2) {
    bit = (n % 2) + "" + bit;
    return getBit(n = Math.floor(n/2), bit)
  } else {
    bit = 1 + "" + bit;
    return bit
  }
}

我很困惑应该如何将其转换为HTML中的元素。任何帮助表示赞赏。

Answer 1

您需要扭转表情：

document.getElementById("binary").innerHTML = bit

您的原始表达式会将所选DOM元素的当前HTML内容分配给变量bit。

document.querySelector('#decimal').addEventListener('input',function(ev){
   document.getElementById("binary").innerHTML=getBit(ev.target.value)});
   
function getBit(n, bit="") {
  if (n >= 2) {
    bit = (n % 2) + "" + bit;
    return getBit(n = Math.floor(n/2), bit)
  } else {
    bit = +n + "" + bit;
    return bit
  }
}

<h1>Decimal to Binary</h1>
<p><input type="number" min="0" id="decimal" placeholder="enter a decimal number">
<p>in binary this is:</p>
<p id="binary"></p>

我更改了事件监听器，现在查找input事件，并将您的else条件中的语句更改为bit = +n + "" + bit;，否则小数点0将被“转换”到1。

如何获取用户输入并将其存储在Javascript函数中使用？

1 个答案: