Как по клику вывести третий инпут?

Question

[fanus]

Один инпут на форме есть, второй выводится по клику. А как вывести третий?

const btn = document.querySelector('.btn');
btn.addEventListener('click', () => {
  document.getElementById('div1').innerHTML =
    '<input type="text" name="text1" class="form-control w-50"/>';
});

Comments

[Петр]

может стоит подойти к задаче иначе?
по клику пушить в массив новый элемент и заново рендерить кусок страницы получая список элементов из массива?

[fanus]

Петр, все бы хорошо, но я половину слов не понял. Можешь пояснить?

[Петр]

fanus, у вас есть некий массив. в который вы через push помещаете добавленные инпуты, потом тут же циклом пробегаетесь по нему и отображаете то, что в нем лежит.

Answer 1

[limpch]

Напиши вместо

document.getElementById('div1').innerHTML =
    '<input type="text" name="text1" class="form-control w-50"/>';

document.getElementById('div1').innerHTML +=
    '<input type="text" name="text1" class="form-control w-50"/>';

Ты сможешь добавлять их много, но не сможешь удалять, будет больше как костыль. Но если тебе не принципиально, то это поможет.

Comments

[fanus]

Спасибо!

[fanus]

А имя у третьего инпута, никак нельзя другое присвоить?

[limpch]

fanus, создай внешнюю переменную и прибавляй ее к имени, вот так:

let inputCount = 1;
const btn = document.querySelector('.btn');
btn.addEventListener('click', () => {
  document.getElementById('div1').innerHTML =
    `<input type="text" name="text${inputCount}" class="form-control w-50"/>`;
  inputCount++;
});

И тогда имя будет изменятся на единицу больше с каждым новым инпутом