I have the following code. I want to take input from a user and display the twice of
that number on the page. I am using document.getElementById("output").value=value; so that the label tag with id output value is changed or in other words it becomes like
10 when user has entered 5 in the input box but I cannot see this value 10. What could be going wrong here?
Separately I am sure it's not the best way to design this kind of thing. If anyone could
share insights on how to write a better code, it would be great.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<label for="input">Enter number :</label>
<input id="text" type="text"></input><br><br>
<input id="button" type="submit"></input><br>
<label id="output"></label>
<script>
let inputButton = document.getElementById("button");
inputButton.addEventListener("click", function(){
let value = parseInt(document.getElementById("text").value);
value=value*2;
document.getElementById("output").value=value;
});
</script>
</body>
</html><label> doesn't have value, instead use textContent like:
let inputButton = document.getElementById("button");
inputButton.addEventListener("click", function() {
let value = parseInt(document.getElementById("text").value);
value = value * 2;
document.getElementById("output").textContent = value;
});<label for="input">Enter number :</label>
<input id="text" type="text"><br><br>
<input id="button" type="submit"><br>
<label id="output"></label>Reference:
PS: I also linked the inputs link to you because I saw you were trying to close them, read that too well