Тело цикла в JS выполняется только один раз

Question

Предупреждение: не бить, я дня три как постигаю фронтенд и представляю, как могут абсурдно выглядеть мои каракули :)

for (let i = 1; i <= form.num.value; i++)
{
  parent.innerHTML = '<div class="block">child</div>';
}

Счётчик ходит правильно (проверено), но тело выполняется только один раз.

Мб это такой прикол js, что такая конструкция только один раз срабатывает, а может, я что-то пропустил, в любом случае, хотелось бы найти какую-нибудь альтернативу. Вроде нормально работал вариант с createElement('div') и appendChild, но там на меня так и не снизошло, как прописать такому счастью класс. Заранее благодарю за попытки наставить меня на путь истинный :D

Answer 1

...тело выполняется только один раз...

Оно выполняется многократно, но каждый раз innerHTML принимает одинаковое значение <div class="block">child</div>

Можно было внутри цикла написать

parent.innerHTML += '<div class="block">child</div>';

** x += 5 ← то же самое → x = x + 5

Но в таком случае оно на каждом круге будет полностью обновлять HTML. Поэтому лучше создать отдельную переменную, на каждом круге в неё добавлять строку, и в конце один раз обновить HTML:

let str = "";
for (let i = 0; i < form.num.value; i++) {
  str += '<div class="block">child</div>';
}
parent.innerHTML = str;

Вроде нормально работал вариант с createElement('div') и appendChild ... но как прописать класс...

for (let i = 0; i < form.num.value; i++) {
  let div = document.createElement('div');
  div.className = "block";
  div.textContent = "child";
  parent.appendChild(div);
}

И, эльфийский вариант:

parent.innerHTML = new Array(+form.num.value).fill('<div class="block">child</div>').join('');

P.s. обращаю внимание, в циклах for: i - число, а form.num.value - строка. При сравнении i < form.num.value она автоматически превращается в число и всё работает, а здесь была бы ошибка) Поэтому поставлен +, он превращает строку в число.

БЛОГ НА HUSL

Тело цикла в JS выполняется только один раз

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