Функция Javascript немедленно останавливается

Question

У меня есть функция, которая активирует кнопку 2 (id keuze1) и кнопку 3 (id keuze 3), если я нажимаю кнопку 1 (id = naam).

function init() {
  let startKnop = document.getElementsByTagName("button")[0].addEventListener("click", startClicked, false);
}

function startClicked(event) {
  let knop2 = document.getElementById("keuze1");
  knop2.removeAttribute("disabled");
  let knop3 = document.getElementById("keuze2");
  knop3.removeAttribute("disabled");
  toonVraag();
}

function toonVraag(event) {
  let i = vraagTeller.value;
  let vraag = document.getElementById('vraag');
  vraag.innerHTML = "Hello World";
}

<label for="naam">Code: </label><input type="text" id="naam" />
</div>
<button disabled>Start</button>
<div>
  <p id="vraag">Een vraag</p>
  <button id="keuze1" disabled>Keuze1</button>
  <button id="keuze2" disabled>Keuze2</button>
</div>

Таким образом, она успешно запускает функцию startClicked(), но немедленно останавливается.Если я добавлю код event.preventDefault(), это не приведет к изменению текста из моего элемента (id = vraag).

Answer 1

Кажется, работает просто отлично, как показано в этом JSFiddle

Я сделал некоторую очистку, хотя:

• Удален атрибут disabled изпервая кнопка
• убрал </div> из 2-й строки
• Добавлен вызов функции init()

Как таковой:

function init() {

    let startKnop = document.getElementsByTagName("button")[0].addEventListener("click", startClicked, false);

}

init();

function startClicked(event) {
    let knop2 = document.getElementById("keuze1");
    knop2.removeAttribute("disabled");

    let knop3 = document.getElementById("keuze2");
    knop3.removeAttribute("disabled");

    toonVraag();
}

function toonVraag(event) {

    let vraag = document.getElementById('vraag');
    vraag.innerHTML = "Hello World";

}

<label for="naam">Code: </label><input type="text" id="naam" />
<button>Start</button>
<div>
    <p id="vraag">Een vraag</p>
    <button id="keuze1" disabled>Keuze1</button>
    <button id="keuze2" disabled>Keuze2</button>
</div>