Question 289990 in Html Question posted in
Some basic documentation can be found here.

How to use multiple HTML buttons in CSS and display the value in a text input

I am trying to get multiple values of the buttons displayed next to each other in "field2" when you select them. I could not find out how to combine them in a working way…

function myFunction() {
  document.getElementById("field2").value = document.getElementById("field1").value;
}
<!DOCTYPE html>
<html>

<body>

  <input class="calculator" type="button" id="field1" value=1 onclick="myFunction()">
  <input class="calculator" type="button" id="field1" value=2 onclick="myFunction()">
  <input class="calculator" type="button" id="field1" value=3 onclick="myFunction()"><br>
  <input class="calculator" type="button" id="field1" value=4 onclick="myFunction()"> .....
  <br> Code: <input type="text" id="field2"><br><br>

</body>

</html>
Tags:

3

Answers


  1. 0

    You can try calling myfunction from the button as they are pressed.
    Something like this :

    function myFunction(button) {
  var field2 = document.getElementById("field2");
  field2.value += button.value;
}
    <input class="calculator" type="button" value="1" onclick="myFunction(this)">
<input class="calculator" type="button" value="2" onclick="myFunction(this)">
<input class="calculator" type="button" value="3" onclick="myFunction(this)">
<input class="calculator" type="button" value="4" onclick="myFunction(this)">
<br> Code: <input type="text" id="field2"><br><br>
    Login or Signup to reply.
  2. 0

    Pass this as the argument to the function, so it can access the button that was clicked.

    Use += to append to the value instead of overwriting it, so you get all the buttons that were clicked.

    function myFunction(button) {
  document.getElementById("field2").value += button.value;
}
    <!DOCTYPE html>
<html>

<body>

  <input class="calculator" type="button" id="field1" value=1 onclick="myFunction(this)">
  <input class="calculator" type="button" id="field1" value=2 onclick="myFunction(this)">
  <input class="calculator" type="button" id="field1" value=3 onclick="myFunction(this)"><br>
  <input class="calculator" type="button" id="field1" value=4 onclick="myFunction(this)"> .....
  <br> Code: <input type="text" id="field2"><br><br>

</body>

</html>
    Login or Signup to reply.
  3. 0
    1. Do not use the same ID for multiple elements, as IDs are meant to be unique on a page. You can select the elements by class instead.
    2. It is better to attach the event listeners with addEventListener rather than using inline event handlers.
    function myFunction(e) {
  document.getElementById("field2").value += e.target.value;
}
document.querySelectorAll('.calculator')
  .forEach(el => el.addEventListener('click', myFunction));
    <input class="calculator" type="button" value=1>
<input class="calculator" type="button" value=2>
<input class="calculator" type="button" value=3><br>
<input class="calculator" type="button" value=4> .....
<br> Code: <input type="text" id="field2"><br><br>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search