Javascript: заполнение входных данных текстом без перезаписи текста, который уже есть

Question

Я пытаюсь создать кнопку, которая добавляет текст к вводу при нажатии, но вместо добавления текста она перезаписывает уже введенный там текст.Мне нужна помощь.Вот код:

<script>
  function autoFill() {
    var input = document.getElementsByTagName("INPUT")[0]

    input.value = "text overwrites instead of adding";
  }
</script>

<input type="input"></input>
<button type="button" onclick="autoFill()">fill it!</button>

Answer 1

Вам необходимо получить значение существующего ввода - добавьте к нему новое содержимое и затем передайте новое значение обратно на вход.

function autoFill() {
    var input = document.getElementsByTagName("INPUT")[0];
    var val = input.value;
    var newContent = "new content";
    input.value = val + " " +  newContent;
  }

<input type="text" value="Sample text">
<button type="button" onclick="autoFill()">fill it!</button>

Answer 2

Я должен быть простым:

input.value += "text overwrites instead of adding";

Оператор + = добавляет что-то к переменной, в то время как = назначаетновое значение.

Изобразите это:

var a=8;
a+=4;
console.log(a);

следы 12

Если мы сделаем это так:

var a=8;
a=4;
console.log(a);

следы 4