时间戳

首页 > 解决方案 > 如何获取用户的输入并将其存储以在 Javascript 函数中使用？

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

问题描述

绝对初学者并尝试创建一个非常简单的十进制到二进制转换器。我知道 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 中的元素感到困惑。任何帮助表示赞赏。

标签： javascripthtmlfunctionvariables

解决方案

你需要改变你的表情：

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.

推荐阅读