CODEWITHSUNDEEP
javascripthtmlfunctiondom
wotsepotse
wotsepotse

Reputation: 7

Javascript function stops immediately

I have a function which enables the button 2(id keuze1) and button 3 ( id keuze 3) If i press button 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>

So it successfully runs the function startClicked(), but stops immediately. If I add the code event.preventDefault() it doesn't go through to changing the text from my element(id = vraag).

Upvotes: 0

Views: 101

Answers (1)

Protozoid
Protozoid

Reputation: 1207

Seems to work just fine, as exemplified in this JSFiddle

I did some clean-up though:

  • Removed the disabled attribute from the first button
  • Removed the </div> from the 2nd line
  • Added call to the init() function

As such:

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>

Upvotes: 1

Related Questions