How to add a value to an input without replacing the one that is already

Question

How to add a value to an input without replacing the one that is already

Navigation

#1 by (9 votes)
#2 by (4 votes)
#3 by (1 votes)

6

How can I do when I click on a button to put one number after another and I do not replace the value that is. That is to say if I give two clicks to the 3 I add 33 or if I click on the 1 and then in the 3 I put 13

link

function numero1() {
  var number1 = 1;
  document.getElementById("inputext").value = number1;
}

function numero2() {
  var number2 = 2;
  document.getElementById("inputext").value = number2;
}

function numero3() {
  var number3 = 3;
  document.getElementById("inputext").value = number3;
}

<div class="display">
  <input type="text" id="inputext" value="0">
</div>
<br />
<button onclick="numero1()">1</button>
<button onclick="numero2()">2</button>
<button onclick="numero3()">3</button>

javascript

asked by David Roberto 22.02.2018 в 01:34

source

3 answers

4

Instead of simply setting the input value = concatenate it += :

document.getElementById("inputext").value += number1;

answered by 22.02.2018 в 01:54

1

The problem comes when assigning = instead of concatenating +=

But you can optimize your code using only Javascript in a few lines with a small change :

JS

function concatenar(value) {
    document.getElementById("inputext").value+=value.innerHTML;
}

HTML

<div class="display">
  <input type="text" id="inputext" placeholder="0">
</div>
<br />
<button onclick="concatenar(this)">1</button>
<button onclick="concatenar(this)">2</button>
<button onclick="concatenar(this)">3</button>

answered by 22.02.2018 в 11:34

Error ios 8.4 simulator in xcode 7 Format Date to Save Form

score 9 · Accepted Answer

Since they are functions that do practically the same thing, where the only thing that changes is the value to add according to the button that is pressed, you could simplify the code considerably if you better organize each button and its attributes.

For this:

To the buttons , we will assign them the same class, which I have called btnNumber (in this way we can add a listener to all of them by means of their class and their type). Consequently, we will no longer need to invoke a function for each button pressed, so we remove the onclick of each button.
We will also give an attribute value to each button, this value will be very useful, as you will see later
We will use querySelectorAll to select the buttons and assign them the listener (there would be other ways to do it in case of compatibility problems). This will allow us to invoke a single function each time one of those buttons is pressed.
In the function to which I have called agregarTexto , we take the value of the button that was pressed by using this , and we add it to the input concatenating with += .

In this way the code is much simplified.

NOTE: I assumed that the initial value 0 you had was not interested in saving it, so it has been changed to placeholder , which does not affect the values of input . If you are interested in keeping the 0 on the left, you change the placeholder by value="0" as you originally had it.

I hope it serves you.

document.querySelectorAll("button.btnNumber").forEach(function(elem) {
  elem.addEventListener('click', agregarTexto, false);
});

function agregarTexto() {
  var btnValor = this.value;
  var elInput = document.getElementById("inputext");
  elInput.value += btnValor;
}

<div class="display">
  <input type="number" id="inputext" placeholder="0">
</div>
<br />
<button class="btnNumber" value="1">1</button>
<button class="btnNumber" value="2">2</button>
<button class="btnNumber" value="3">3</button>