Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Michael Ross
Michael Ross
11,204 Points

Problem Updating a Global Variable Using Event Listeners & Functions

I have created a JS quiz app in order to test what I've recently learned.

The problem I have is that I cannot get my quiz to update the correct or incorrect variable based on the selected radio button vale - both of which have been globally set at 0.

The page uses the JS to create a label and input for the current question within the array of question objects at the top of the of script.

What I've done is use a single next button to fire the function to loop through each of the choices and return the value of the checked answer. I then went on to use same next button to fire the updatescore function, that should add 1 to either of the correct or incorrect variables.

I have created an endOfQuiz function to update the main content and display the number of correct answers. Each time this updates, after the last question has been answered, it is always saying 0. I don't seem to be able to update this value. I'm not sure if my radio buttons are returning the checked value or if my updatescore function isn't not working.

I have created a codepen to make it easier to see the full picture - http://codepen.io/michael-r87/pen/EVGbog

Any help would be greatly appreciated!

3 Answers

jobbol
.a{fill-rule:evenodd;}techdegree
jobbol
Full Stack JavaScript Techdegree Student 19,117 Points

The problem is the way you attach the event listeners. 

buttonHTML.addEventListener("click", getRadioVal());  //This calls a function, and passes the return value (nothing).
buttonHTML.addEventListener("click", getRadioVal);  //This passes the function itself.

So I rewrote two of these eventListeners, and made getRadioVal work without parameters. It appears to be working now. You'll have to do some refactoring to get it in your coding style.

http://codepen.io/wryn/pen/zvypWW

Michael Ross
Michael Ross
11,204 Points

Thanks a lot Josh. I've been hacking away at this for hours and yet again it is something so simple! Really appreciate your help here.

Michael Ross
Michael Ross
11,204 Points
Michael Ross
Michael Ross
11,204 Points

Josh, just a thought. So when I used:

buttonHTML.addEventListener("click", getRadioVal(choicesHTML, "choice"));

I was passing in the required arguments and I did have a return statement within the getRadioVal function. So I would have expected the return statement, the variable of 'choices' to be passed out to the global scope so it could be used within the 'updateScore' function?

I am not certain I fully understand the difference between what you have mentioned above. I've re-factored the code and based on your feedback changed my event listeners as follows:

document.addEventListener("load", questChoices()); - Why is it that this function only works when I use the ()? buttonHTML.addEventListener("click", getRadioVal); buttonHTML.addEventListener("click", updateScore); buttonHTML.addEventListener("click", updateQuest); buttonHTML.addEventListener("click", questChoices);

Thanks for your time and any further feedback you can provide.

jobbol
.a{fill-rule:evenodd;}techdegree
jobbol
Full Stack JavaScript Techdegree Student 19,117 Points

> I did have a return statement within the getRadioVal function[...]?

Even if the eventListener received a string value, it probably did nothing with it. One of the weird things about Javascript is it allows things to silently fail.

> document.addEventListener("load", questChoices()); - Why is it that this function only works when I use the ()?

Once again you're calling instead of passing. questChoices gets run first, then EventListener gets the return value. It works because you forced it to run instead of having it triggered.

It won't work without the () because the trigger event document.onload already fired.

  1. document.onload fires early.
  2. Hookup questChoices to event.
  3. Waiting for document.onload.

Instead you need to hook up to window.onload like this:

window.addEventListener("load", questChoices);

More about window vs document load here.

Michael Ross
Michael Ross
11,204 Points
Michael Ross
Michael Ross
11,204 Points

Thanks Josh, makes sense!

jobbol
.a{fill-rule:evenodd;}techdegree
jobbol
Full Stack JavaScript Techdegree Student 19,117 Points

Yup yup, any time.