Using a function stopped my code from working?

Question

I have attached the before code and the after code. The code is if the answer is correct a pop up div appears for a second saying correct, if the answer is wrong a pop up div appears for a second saying wrong.

I decided to improve the code by using functions to hide and show divs and use the variable id to pass the div id, and call it when i need to hide or unhide a div, as throughout the reso of the code i am constantly hiding and unhiding divs.

but for some reason teh functions work on all other divs accept in this new code. the score variable increases and the inner html for the score updates just the "wrong" and "correct" divs dont show and then hide after a second.

Before,

function hideCorrectBox(){
document.getElementById("correct").style.display='none'; 
}
function hideWrongBox(){
document.getElementById("wrong").style.display='none'; 
}
document.getElementById("box1").onclick=function(){
if(areWePlaying==true){
if(document.getElementById("box1").innerHTML==answer){
    document.getElementById("correct").style.display='initial';
    setTimeout(hideCorrectBox,1000);
    score= score+1;
    document.getElementById("scoreValue").innerHTML= score;
    newQuestion();
}
else {document.getElementById("wrong").style.display='initial';
     setTimeout(hideWrongBox,1000);}
}}

After,

function show(Id){
   document.getElementById(Id).style.display="initial";
}
function hide(Id){
   document.getElementById(Id).style.display="none";
}
document.getElementById("box1").onclick=function(){
if(areWePlaying==true){
if(document.getElementById("box1").innerHTML==answer){
    show("correct");
    setTimeout(hide("correct"),1000);
    score= score+1;
    document.getElementById("scoreValue").innerHTML= score;
    newQuestion();
}
else {show("wrong");
     setTimeout(hide("wrong"),1000);}
}}

`setTimeout(hide("wrong"),1000);}` <-- wrong you are calling the method and setting what it returns to the timeout. Should be dupes on this, very common issue — epascarello, Sep 04 '18 at 17:20
`setTimeout(hide("correct"),1000);` calls the `hide()` function **before** the timer is established. — Pointy, Sep 04 '18 at 17:20
One problem you have is you're passing a function invocation, not a function *reference*, to `setTimeout()` — Mitya, Sep 04 '18 at 17:20
Possible duplicate of [How can I pass a parameter to a setTimeout() callback?](https://stackoverflow.com/questions/1190642/how-can-i-pass-a-parameter-to-a-settimeout-callback) — , Sep 04 '18 at 17:37

Scott Marcus · Accepted Answer · 2018-09-04T17:25:31.603

3

The issue is with these lines:

setTimeout(hide("correct"),1000);

You must pass a function reference to setTimeout(), but you are passing a function invocation. The result is that hide() gets called immediatley and the return value from that invocation is what is then being passed to setTimeout(). Since hide has no return value, undefined is being passed.

Change the lines to:

setTimeout(function(){hide("correct")},1000);

So that you are passing the anonymous function declaration that itself will invoke hide.

edited Sep 04 '18 at 17:25

answered Sep 04 '18 at 17:21

Scott Marcus

64,069
6
49
71

or `setTimeout(hide.bind(undefined, "correct"), 1000);` – Olivier Boissé Sep 04 '18 at 17:24
1

@OlivierBoissé Yes, but trying to keep it simple for someone who is obviously new to JS. – Scott Marcus Sep 04 '18 at 17:24
@ScottMarcus This question keeps coming up on a regular basis; surely there are loads of duplicates out there? – Sep 04 '18 at 17:25
@ScottMarcus Thanks a million literally spent an hour and a half going through it all in case i had accidentally added or removed something. So basically in the first code the function worked because i wasn't passing a value in the () ? – Kurt Money Sep 04 '18 at 17:43
@KurtMoney Right, by not adding the `()`, you're not invoking the function, you're only referencing it. – Scott Marcus Sep 04 '18 at 17:56

Using a function stopped my code from working?

1 Answers1