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

问题描述 投票:0回答:3

所以我对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>
javascript forms onclick binary
3个回答
0
投票

我会改变一些事情。首先,我会在表单之外保留非表单元素。主要问题是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>

1
投票

这是因为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>

0
投票

你没有定义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>
© www.soinside.com 2019 - 2024. All rights reserved.