how to input numbers using buttons in to a textbox

Question

I want to input numbers using buttons into the textbox how to do that?

I have a problem on displaying buttons to textbox, I can only store one function in one button for example <button onclick="getNumber(1)">1</button>

function calc() {
  var a, b, c;
  a = Number(document.getElementById('num1').value);
  b = Number(document.getElementById('num2').value);
  c = document.getElementById('operators').value;
  if (c === '+') {
    x = document.getElementById('ans').value = (a + b);
  }
  if (c === '-') {
    x = document.getElementById('ans').value = (a - b);
  }
  if (c === '*') {
    x = document.getElementById('ans').value = (a * b);
  }
  if (c === '/') {
    x = document.getElementById('ans').value = (a / b);
  }
}

<input type="text" id="num1"><br>
<input type="text" id="num2"><br>

<select id="operators">
  <option value="+">+</option>
  <option value="-">-</option>
  <option value="*">*</option>
  <option value="/">/</option>
</select>
<br>
<button onclick="calc()">=</button><br>
<input type="text" id="ans">

Can you explain what you mean by one function in one button. What would you like to have a button do? — mplungjan
– mplungjan, Commented Feb 10, 2020 at 11:11
Hello sir i want buttons to be display on the textbox for example button 1 is diplay on the textbox 1 and button 3 is diplayed on the textbox 2 — Amateurprogrammer
– Amateurprogrammer, Commented Feb 10, 2020 at 12:37

mplungjan · Accepted Answer · 2020-02-10 10:26:25Z

Create a container
Give a value to each button
Use delegation to get the value from whichever button is clicked
DRY - Don't repeat yourself

function calc() {
  var a, b, c, x = "";
  a = Number(document.getElementById('num1').value);
  b = Number(document.getElementById('num2').value);
  c = document.getElementById('operators').value;
  if (c === '+') {
    x = (a + b);
  } else if (c === '-') {
    x = (a - b);
  } else if (c === '*') {
    x = (a * b);
  } else if (c === '/') {
    x = (a / b);
  }
  document.getElementById('ans').value = x;
}
window.addEventListener("load", function() { // when the page loads
  document.getElementById("calc").addEventListener("click", calc);
  document.getElementById("buts").addEventListener("click", function(e) {
    var tgt = e.target;
    if (tgt.classList.contains("but")) {
      var val = tgt.value;
      console.log(val); // not sure what you want to do here
    }
  });
});

<input type="text" id="num1"><br>
<input type="text" id="num2"><br>

<select id="operators">
  <option value="+">+</option>
  <option value="-">-</option>
  <option value="*">*</option>
  <option value="/">/</option>
</select>
<br>
<div id="buts">
  <button type="button" class="but" value="1">1</button>
  <button type="button" class="but" value="2">2</button>
  <button type="button" class="but" value="3">3</button>
</div>
<button type="button" id="calc">=</button><br>
<input type="text" id="ans">

Collectives™ on Stack Overflow

how to input numbers using buttons in to a textbox

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related