simple javascript JS event handler not working correctly

Question

Below is my code and the instructions that went with it. Currently the responseText for an incorrect answer displays on page load and I can't change it to the correct answer.

// Declare a string variable called question and set it equal to a True/False question of your choice. 
var question = "KD has sold his legacy at OKC for a championship ring at GS.";

// Declare a boolean variable called answer and set it equal to true or false (the answer to the question you asked above.) 
var answer = true;

// Create a function called loadQuestion() that sets the value of the questionText element equal to the question variable you declared above. 
function loadQuestion(){
document.getElementById("questionText").innerHTML = question;
}

// Create a function called checkAnswer(userAnswer) that takes one incoming parameter. 
function checkAnswer(userAnswer){
  if(userAnswer===answer){
    document.getElementById("responseText").innerHTML = "That is correct!";             
    document.getElementById("responseText").className = "correctAnswer";
  }
  else if(userAnswer!==answer){       
    document.getElementById("responseText").innerHTML = "I'm sorry, that is    
     not correct.";
    document.getElementById("responseText").className = "incorrectAnswer";
  }
}
// ---> If your answer variable matches the incoming userAnswer parameter, write a success message in the element called responseText. 
// ---> If your answer variable does NOT match the userAnswer parameter, write a failure message in the element called responseText. 

// Create TRADITIONAL DOM EVENT HANDLERS for the "onclick" events for the three buttons.
var start = document.getElementById("startButton");
var truth = document.getElementById("trueButton");
var falsify = document.getElementById("falseButton");
// The Start button should trigger the loadQuestion method
start.onclick = loadQuestion;
// The True button should trigger the checkAnswer method with a value of "true"
truth.onclick = checkAnswer("true");
// The False button should trigger the checkAnswer method with a value of "false"
falsify.onclick = checkAnswer("false");

If you know it should be start.onclick = loadQuestion;, then why did you try like checkAnswer("true"); ? — Rayon
– Rayon, Commented Jul 7, 2016 at 16:04
Why didn't you write loadQuestion() instead of loadQuestion ? — Rayon
– Rayon, Commented Jul 7, 2016 at 16:08
do you mean i'm comparing a string w/ a boolean? i corrected that and its working now, thanks! — annag153
– annag153, Commented Jul 7, 2016 at 16:10
oh.. when you write it as a simple e.onclick = function, you don't need the parentheses, unless you have parameters, and then you have to use the anonymous function, which i was doing wrong — annag153
– annag153, Commented Jul 7, 2016 at 16:12
Yes, The thing is, onclick or any event expects handler to be an function expression.. You were passing undefined as function was being invoked and it returned nothing(undefined) — Rayon
– Rayon, Commented Jul 7, 2016 at 16:23

Oleksandr · Accepted Answer · 2016-07-08 07:38:10Z

1

if you are comparing as triple equality === make sure that type is the same on both sides

answered Jul 8, 2016 at 7:38

Oleksandr

5,7284 gold badges42 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alexey · Accepted Answer · 2016-07-07 15:59:58Z

0

it should be

<...>.onclick = function() {
   checkAnswer("true");
}

instead of

<...>.onclick = checkAnswer("true");

answered Jul 7, 2016 at 15:59

Alexey

9995 silver badges12 bronze badges

1 Comment

annag153 Over a year ago

this worked great.. i also had to make sure i had the answer var as a string. thanks!

Collectives™ on Stack Overflow

simple javascript JS event handler not working correctly

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related