Блог

Итак, вот в чем дело. Я добавил простую форму, подобную этой:

         <form class="form form--character">
            <h1 class="title title--characters">Choose Players</h1>
            <div class="form--inputs">
            <input type="text" class="input input--players" placeholder="Player 1"><br>
            <input type="text" class="input input--players" placeholder="Player 2"><br>
            <input type="text" class="input input--players" placeholder="Player 3"><br>
            <input type="text" class="input input--players" placeholder="Player 4"><br>
            </div>
            <br>
            <button class="btn btn--add-characters">Add Player</button>
            <button class="btn btn--continue">Continue</button>
        </form>
 

Кнопка с именем btn—add-players выполняет задачу добавления другого ввода в div входных данных, который выглядит примерно так:

 window.onload =function(){
    var players=[];
    var playerInputCount=4; 
    var form = document.querySelector(".form--inputs");        
    document.querySelector(".btn--add-characters").onclick=function(){
        playerInputCount =1;
        form.innerHTML = form.innerHTML   "<input type='text' class='input input--players' placeholder='Player "   playerInputCount   "'><br>";
    }
    
}
 

Теперь проблема в том, что … когда я нажимаю кнопку, ввод добавляется на страницу, но в течение миллисекунд DOM, похоже, сбрасывается, и ввода там больше нет.
Я помещаю журнал консоли в функцию, чтобы посмотреть, по-прежнему ли он попадает в консоль после нажатия.
Она попадает в консоль, но также в течение миллисекунд журнал консоли отсутствует.
Как исправить эту проблему?

Кнопка находится внутри формы, поэтому, когда вы нажимаете на кнопку, она отправляет форму. Добавить type="button" .

 <button class="btn btn--add-characters" type="button">Add Player</button>
 

Когда элемент помещается в a , его действие по умолчанию будет как кнопка отправки формы, если type="button" не указан атрибут.

Созданные дополнительные элементы отклоняются, поскольку кнопка отправляет . Чтобы этого не произошло, добавьте type="button" атрибут для кнопки с классом «btn btn—add-characters», и все будет в порядке.