InnerHTML стирает данные из input

Question

есть такой код:

window.addSpec = () => {
  // if the last of the characteristic item is not empty, then add a new item
  let lastSpec = document.querySelector('.specItem:last-child .spec').value;
  let lastSpecVal = document.querySelector('.specItem:last-child .specVal').value;

  if (lastSpec != '' && lastSpecVal != '') {
    document.querySelector('#specList').innerHTML += '<div class="specItem"><input type="text" placeholder="Характеристика" class="spec"><span class="spec-val">:</span><input type="text" placeholder="Значение" class="specVal"></div>';
  } else {
    document.querySelector('#specList').innerHTML += '<div class="specItem" id="deleted">Заполните предыдущие поля</div>';
    setTimeout(() => {
      document.querySelector('#deleted').style.opacity = 0;
    }, 100);
    setTimeout(() => {
      document.querySelector('#deleted').remove();
    }, 2000);
  }
}

<div id="specifications">
  <div id="open">Харктеристики +</div><br>
  <div id="specList">
    <div class="specItem"><input type="text" placeholder="Характеристика" class="spec"><span class="spec-val">:</span><input type="text" placeholder="Значение" class="specVal"></div>
  </div>
  <div id="addSpec" onclick="addSpec()">+</div>
</div>

В нем обработчик события onclick при клике проверяется заполнены ли предыдущие инпуты, если да, то вставляются следующие инпуты, если нет, то вставляется сообщение "заполните поля"

Проблема в том, что когда в блок вставляются новые инпуты, предыдущие почему-то сбрасываются, те пустые

Answer 1

Вы используете innerHTML(), который заменяет все содержимое и перезаписывает DOM структуру. Т.е. инпуты с данными заменяются новыми, пустыми инпутами.

Используйте insertAdjacentHTML('beforeend', "ваш код") вместо innerHTML, он подставит в конец элемента новый элемент, созданный из строки.

Вот так:

window.addSpec = ()=>{
    // if the last of the characteristic item is not empty, then add a new item
    let lastSpec = document.querySelector('.specItem:last-child .spec').value;
    let lastSpecVal = document.querySelector('.specItem:last-child .specVal').value;

    if(lastSpec != '' && lastSpecVal != ''){
        document.querySelector('#specList').insertAdjacentHTML('beforeend', '<div class="specItem"><input type="text" placeholder="Характеристика" class="spec"><span class="spec-val">:</span><input type="text" placeholder="Значение" class="specVal"></div>');
    }else{
        document.querySelector('#specList').insertAdjacentHTML('beforeend','<div class="specItem" id="deleted">Заполните предыдущие поля</div>');
        setTimeout(() => {
            document.querySelector('#deleted').style.opacity = 0;
        }, 1500);
        setTimeout(() => {
            document.querySelector('#deleted').remove();
        }, 1500);
    }
}

<div id="specifications">
  <div id="open">Харктеристики +</div><br>
  <div id="specList"><div class="specItem"><input type="text" placeholder="Характеристика" class="spec" value="1"><span class="spec-val">:</span><input type="text" placeholder="Значение" class="specVal" value="1"></div></div>
  <div id="addSpec" onclick="addSpec()">+</div>
</div>

БЛОГ НА HUSL

InnerHTML стирает данные из input

Ответы (1 шт):

Вот так: