Две кнопки HTML установлены одинаково, но одна не работает

Question

Я создаю динамическую форму, в которой пользователь добавляет и удаляет входные данные с кнопок, однако одна из этих кнопок имеет событие onclick, а другая - нет, несмотря на то, что они настроены точно так же.

Я пытался использовать <button> и изменить функцию на console.log, но кнопка «Добавить вариант ответа» никогда не получает событие onclick.

//add and remove buttons
        var addButton = document.createElement('input'); addButton.type = "button"
        var removeButton = document.createElement('input'); removeButton.type = "button"
        addButton.value = "Add Answer Option";
        removeButton.value = "Remove Answer Option";
        var buttonLi = document.createElement('li');
        buttonLi.innerHTML = "<br>"
        buttonLi.appendChild(addButton);
        buttonLi.innerHTML += ' ';
        buttonLi.appendChild(removeButton);

        var buttonUL = document.createElement('ul');
        this.mainElement.appendChild(buttonUL);

        buttonLi.style = "list-style-type: none;";
        buttonUL.appendChild(buttonLi);

        addButton.onclick = function() {quiz.questions[id].addAnswerOption();}
        removeButton.onclick = function() {quiz.questions[id].removeAnswerOption();}

JS Fiddle: https://jsfiddle.net/bh7tsxqu/

Кнопка Добавить должна добавить вариант ответа, но это не так. Кнопка удаления должна удалить параметры ответа, и это делает.

Answer 1

Вы используете свойство innerHtml для добавления контента. Он удаляет слушателей, когда вы добавляете пробел между кнопками. Чтобы ваш код работал, удалите эту строку:

buttonLi.innerHTML += ' ';

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

Или вы можете использовать метод insertAdjacentHTML для добавления пробела между кнопками.

buttonLi.insertAdjacentHTML('beforeend',' ');

Подробнее об этом можно прочитать здесь: innerHTML

Answer 2

Я просто дал идентификаторы кнопок и использовал эти идентификаторы в качестве селекторов для добавления вашего события onclick.

В частности, это то, что я добавил.

var rmButID = document.getElementById('rmBut');
var addButID = document.getElementById('addBut');

И это то, что я изменил.

var addButton = document.createElement('input'); addButton.type = "button"; addButton.id = "addBut"
var removeButton = document.createElement('input'); removeButton.type = "button"; removeButton.id = "rmBut"

Здесь все вместе.

var addButton = document.createElement('input'); addButton.type = "button"; addButton.id = "addBut"
var removeButton = document.createElement('input'); removeButton.type = "button"; removeButton.id = "rmBut"
addButton.value = "Add Answer Option";
removeButton.value = "Remove Answer Option";
var buttonLi = document.createElement('li');
buttonLi.innerHTML = "<br>"
buttonLi.appendChild(addButton);
buttonLi.innerHTML += ' ';
buttonLi.appendChild(removeButton);

var buttonUL = document.createElement('ul');
this.mainElement.appendChild(buttonUL);

buttonLi.style = "list-style-type: none;";
buttonUL.appendChild(buttonLi);
var rmButID = document.getElementById('rmBut');
var addButID = document.getElementById('addBut');
addButID.onclick = function() {quiz.questions[id].addAnswerOption();}
rmButID.onclick = function() {quiz.questions[id].removeAnswerOption();}