How to display number input using button for calculator in HTML?

Question

When I click numbers, I always get the same result. Why? 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>

phts · Accepted Answer · 2015-06-21 08:01:31Z

2

1) Ids must be unique. Rewrite your HTML to use classes or unique ids.

2) To get value in myFunction you can simply pass this from elenment to access to clicked button.

<input type="button" id="myBtn" onclick="myFunction(this)" value="1">

....

function myFunction(button) {
    var x = button.value;
    document.getElementById("demo").innerHTML = x;
}

http://jsfiddle.net/0sewtjLs/

Still have the problem in case of more than 1digit number

Just concat string:

document.getElementById("demo").innerHTML += x;

http://jsfiddle.net/0sewtjLs/1/

edited Jun 21, 2015 at 8:01

answered Jun 21, 2015 at 7:53

phts

3,9251 gold badge22 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user3721143 · Accepted Answer · 2015-06-21 07:53:12Z

1

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>

answered Jun 21, 2015 at 7:53

user3721143

331 silver badge9 bronze badges

Comments

Alexandre_Cbt · Accepted Answer · 2017-11-13 18:34:30Z

you can also keep logic only in Javascript, and removing the "onclick" on HTML. In the code bellow, all your buttons have "myBtn" class. You can have infinite time the same class. But ID's are unique, be carefull.

In this code I get the all class "myBtn", wich return an Array. On this array, I making a loop and add an eventListner listening clicks and calling the myFunction function.

 <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>

Collectives™ on Stack Overflow

How to display number input using button for calculator in HTML?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related