I'm unsure as to why my onclick button doesn't link up with what I type into my textbox?
Question
So I am fairly new to Javascript, and I am working on some code that converts decimal numbers to binary numbers. However when I run this program, I can't seem to get the output I am looking for. The best I have done was get my function to output an exact number already inside of the function, when I am instead trying to get an output that is generated from any number typed into the textbox? I'm not entirely sure where I am going wrong with this. I feel like there is something I am clearly missing, but I can't seem to grasp exactly what it is. I've been using codecademy and w3schools to gain more knowledge of JavaScript, but if anyone has any other resources that helped them when they first started programming that would be great!
<!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>
3 answers
solution1
1 2018-03-01 01:00:32
It's because num doesn't have a value.
Try this:
<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>
solution2
0 ACCPTED 2018-03-01 01:03:39
There are a few things I would change. First off, I would keep non form elements outside of the form. The major issue is that num doesn't have a value, but to ensure it works you will also want to take the event and use event.preventDefault() to make sure it doesn't submit the form. Try:
<!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>
solution3
0 2018-03-01 01:07:09
You're not defining num .
Grab it from the input as such:
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.