我不确定为什么我的onclick按钮与我输入文本框的内容没有关联?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了我不确定为什么我的onclick按钮与我输入文本框的内容没有关联?相关的知识,希望对你有一定的参考价值。

所以我对javascript很新,我正在研究一些将十进制数转换为二进制数的代码。但是当我运行这个程序时,我似乎无法获得我正在寻找的输出。我做的最好的是让我的函数输出一个已经在函数内部的确切数字,而当我试图得到一个从文本框中键入的任何数字生成的输出?我不完全确定我在哪里出错了。我觉得有些东西我很明显缺失,但我似乎无法准确掌握它是什么。我一直在使用codecademy和w3schools来获得更多关于JavaScript的知识,但是如果有人有任何其他资源在他们第一次开始编程时帮助他们那就太棒了!

<!DOCTYPE html>
<html>
<body>

<p>Convert from Decimal to Binary:</p>

<form method = "post">

<p id = "demo">

<label for="decNum"></label>
    <input name="decNum" type="text">

<button onclick="toBinary()">Enter</button>

</p>

</form>

<script>
function toBinary() {
    document.getElementById("demo").innerHTML =
    parseInt(num,10).toString(2); 
}

</script>

</body>
</html>
答案

我会改变一些事情。首先,我会在表单之外保留非表单元素。主要问题是num没有值,但为了确保它有效,您还需要获取事件并使用event.preventDefault()以确保它不提交表单。尝试:

<!DOCTYPE html>
<html>
<body>
<p>Convert from Decimal to Binary:</p>
<form method="post">
  <label for="decNum"></label>
  <input id="field" name="decNum" type="text">
  <button onclick="toBinary(event)">Enter</button>
</form>
<p id="demo"></p>
<script>
function toBinary(event) {
    event.preventDefault();
    var value = document.getElementById('field').value;
    document.getElementById("demo").innerHTML =
    parseInt(Number(value), 10).toString(2);
}
</script>
</body>
</html>
另一答案

这是因为num没有价值。

试试这个:

<p>Convert from Decimal to Binary:</p>

<form method = "post">

<p id = "demo">

<label for="decNum"></label>
    <input name="decNum" type="text" id="decNum">

<button onclick="toBinary()">Enter</button>
</p>


</form>

<script>
function toBinary() {
    var num = document.getElementById("decNum").value;
    document.getElementById("demo").innerHTML =
    parseInt(num, 10).toString(2); 
}

</script>
另一答案

你没有定义num

从输入中抓取它:

function toBinary() {
    const num = document.getElementById("textInput").value;
    document.getElementById("demo").innerHTML = parseInt(Number(num),10).toString(2); 
}
<p id = "demo"></p>
<label for="decNum"></label>
<input name="decNum" type="text" id="textInput"> 
<button onclick="toBinary()">Enter</button>

以上是关于我不确定为什么我的onclick按钮与我输入文本框的内容没有关联?的主要内容,如果未能解决你的问题,请参考以下文章

自动更新文本框

抑制触发的 Blazor 输入事件

ASP.NET点击按钮,弹出一个提示框

带有javascript的单选按钮

禁用基于三个文本框字段的按钮

如何启用禁用的文本框 onclick 使用角度的按钮