Добавление новых входов с помощью JS стирает предыдущие - PullRequest
Новая
       40

Добавление новых входов с помощью JS стирает предыдущие

0 голосов
/ 10 декабря 2018

Итак, у меня есть этот код, 

spellNumber = 0

function createSpell() {
  document.getElementById("spells").innerHTML +=
    '<p><input type="text"></p><br />'
  spellNumber += 1;
  spellsActive = true
}
<a onClick="createSpell()" class="spellButton" style="background-color:#717171">Add a Spell</a>
<div id="spells"></div>

, но всякий раз, когда я пытаюсь добавить другой вход, нажав кнопку, он стирает все предыдущие.Как я могу предотвратить это?

1 Ответ

0 голосов
/ 11 декабря 2018

Объединение с существующим .innerHTML будет означать, что будет сохранена только HTML-строка предыдущих элементов - ваши input s не имеют атрибута .value , поэтомупохоже, что значения теряются.(в действительности происходит то, что элемент уничтожается, а затем воссоздается с новой полной строкой HTML.)

Вместо объединения с существующим innerHTML, используйте вместо него createElement, чтобы не повредитьчто уже существует в контейнере: 

let spellNumber = 0;
const spells = document.getElementById("spells")

function createSpell() {
  const p = spells.appendChild(document.createElement('p'));
  const input  = p.appendChild(document.createElement('input'));
  spells.appendChild(document.createElement('br'));
  spellNumber += 1;
  spellsActive = true
}
<a onClick="createSpell()" class="spellButton" style="background-color:#717171">Add a Spell</a>
<div id="spells"></div>

Другим вариантом будет использование insertAdjacentHTML, которое, как и appendChild, не повредит существующие элементы: 

let spellNumber = 0;
const spells = document.getElementById("spells")

function createSpell() {
  spells.insertAdjacentHTML('beforeend', '<p><input type="text"></input></p></br>');
  spellNumber += 1;
  spellsActive = true
}
<a onClick="createSpell()" class="spellButton" style="background-color:#717171">Add a Spell</a>
<div id="spells"></div>
...