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

【问题标题】：How do I take a user's input and store it to be used in a Javascript function?如何获取用户的输入并将其存储以在 Javascript 函数中使用？
【发布时间】：2019-10-26 20:02:17
【问题描述】：

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

【问题讨论】：

另请注意，您的第一个输入未关闭。

标签： javascript html function variables

【解决方案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。

【讨论】：

Fwiw，keyup 不适用于“数字”输入（数字滚轮），必须输入值。
很有趣。根据所使用的浏览器和操作系统，这些输入类型的处理方式似乎有所不同。它在我的（旧）Android 手机上运行良好。
也许这会有所帮助：stackoverflow.com/a/45396364/2610061 ?
也许input 事件现在也适用于您的号码滚轮？我刚刚改了帖子。
现在对我有用。检查了 Chrome 和 FFox。（顺便说一句，语句末尾缺少 3 个分号）。