How to display number input using a button for a calculator in HTML?
When I hit the numbers, I always get the same result. What for? Here is my HTML code:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<input type="button" id="myBtn" onclick="myFunction()" value="1">
<input type="button" id="myBtn" onclick="myFunction()" value="2">
<input type="button" id="myBtn" onclick="myFunction()" value="3">
<input type="button" id="myBtn" onclick="myFunction()" value="4">
<input type="button" id="myBtn" onclick="myFunction()" value="5">
<input type="button" id="myBtn" onclick="myFunction()" value="6">
<input type="button" id="myBtn" onclick="myFunction()" value="7">
<input type="button" id="myBtn" onclick="myFunction()" value="8">
<input type="button" id="myBtn" onclick="myFunction()" value="9">
<input type="button" id="myBtn" onclick="myFunction()" value="0">
<script>
function myFunction() {
var x = document.getElementById("myBtn").value;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
source to share
1) Identifiers must be unique. Rewrite your HTML to use classes or unique identifiers.
2) To get the value in myFunction
, you can simply pass this
from elenment to access the pressed button.
<input type="button" id="myBtn" onclick="myFunction(this)" value="1">
....
function myFunction(button) {
var x = button.value;
document.getElementById("demo").innerHTML = x;
}
Still a problem in case of more than 1 number
Only the concat line:
document.getElementById("demo").innerHTML += x;
source to share
try
<input type="button" id="myBtn" onclick="myFunction(1)" >
<input type="button" id="myBtn" onclick="myFunction(2)" >
<input type="button" id="myBtn" onclick="myFunction(3)" >
<input type="button" id="myBtn" onclick="myFunction(4)" >
<input type="button" id="myBtn" onclick="myFunction(5)" >
<input type="button" id="myBtn" onclick="myFunction(6)" >
<input type="button" id="myBtn" onclick="myFunction(7)" >
<input type="button" id="myBtn" onclick="myFunction(8)" >
<input type="button" id="myBtn" onclick="myFunction(9)" >
<input type="button" id="myBtn" onclick="myFunction(0)" >
<script>
function myFunction(x) {
document.getElementById("demo").innerHTML = x;
}
</script>
source to share
you can also keep logic only in Javascript and remove "onclick" in HTML. In the code below, all of your buttons are of the class "myBtn". You can have infinite time in one class. But IDs are unique, be careful.
In this code, I get the whole class "myBtn" which returns an array. In this array, I create a loop and add clicks to listen to eventListner and call myFunction.
<p id="demo"></p>
<input type="button" class="myBtn" value="1">
<input type="button" class="myBtn" value="2">
<input type="button" class="myBtn" value="3">
<input type="button" class="myBtn" value="4">
<input type="button" class="myBtn" value="5">
<input type="button" class="myBtn" value="6">
<input type="button" class="myBtn" value="7">
<input type="button" class="myBtn" value="8">
<input type="button" class="myBtn" value="9">
<input type="button" class="myBtn" value="0">
<script>
const allBtns = document.querySelectorAll('.myBtn');
allBtns.forEach( element => {
element.addEventListener('click', myFunction);
})
function myFunction(e) {
const value = e.target.value;
document.getElementById("demo").innerHTML = value;
}
</script>
source to share