I have a question about getting a function to not run if it is already run

Question

I built a trivia game and if you run out of time then the function score() I wrote runs grades your game. This function is also tied to the submit button. So the issue arises when you finish the quiz with time remaining; because once you submit your score if the time goes to zero before you click try again it doubles your score.

How can get around this issue; I'm open to fixing it in the timer function or writing another function to prevent it from grading twice.

side note the try again button can't reset the page per requirements so I have the start button begin the countdown() (timer).

So the function I need is to check if score has been run and if it has don't run it again ; then the count has to reset when you click the start button.

var button = document.getElementById("main-button")
var taButton = document.getElementById("ta-button")
var quizText = document.getElementById("quiz")
var correct = 0;
var incorrect = 0;
var notAnswered = 0;
var correctText = document.getElementById("correct-text")
var incorrectText = document.getElementById("incorrect-text")
var notAnsweredText = document.getElementById("notAnswered-text")
var timeLeft = 70;
var timeLeftText = document.getElementById("timeLeft-text")
var elem = document.getElementById('some_div');
var timerId = setInterval(countdown, 1000);












// timer function
function countdown() {
    if (timeLeft == 0) {
        clearTimeout(timerId);       
        score();
    } else {
        timeLeftText.textContent = "Time Remaining " + timeLeft;
        timeLeft--;
    }
    
    function start() {
    document.getElementById("main-button").style.display = "none";
    document.getElementById("quiz").style.display = "block";
    document.getElementById("some_div").style.display = "inline-block";
    timeLeft = 70;
    countdown();    
    timeLeftText.textContent = "Time Remaining " + timeLeft;

}


function score() {
    correct = 0;
    incorrect = 0;
    notAnswered = 0;
    var question1
    var question2 
    var question3 
    var question4 
    var question5 
    var question6 
    var question7 
    var question8 
    var question9
    var question10
// checks if the value of or radio is null.
    if (document.querySelector('input[name="question1"]:checked') === null) { notAnswered++;
    
 }
// if it has a value it logs the value
// then takes the value that was stored to the radio button and clears it; resetting or buttons.
    else { question1 = document.querySelector('input[name="question1"]:checked').value;
    document.querySelector('input[name="question1"]').checked=false;
 
// This checks the value we stored and then determines if it that value is the correct answer.
    if (question1 === "d") {
        correct++;
    }
    else if ((question1 === "a") || (question1 === "b") || (question1 === "c")) {
        incorrect++;
    }}
    // question 2.
    if (document.querySelector('input[name="question2"]:checked') === null) { notAnswered++;
       
     }

    else { question2 = document.querySelector('input[name="question2"]:checked').value;
    document.querySelector('input[name="question2"]').checked=false;
 

    if (question2 === "d") {
        correct++;
    }
    else if (question2 === "a" || "b" || "c") {
        incorrect++;
    }}
//  question 3.
if (document.querySelector('input[name="question3"]:checked') === null) { notAnswered++;
    
 }

else { question3 = document.querySelector('input[name="question3"]:checked').value;
document.querySelector('input[name="question3"]').checked=false;


if (question3 === "a") {
    correct++;
}
else if (question2 === "b" || "c" || "d") {
    incorrect++;
}}
// question 4
if (document.querySelector('input[name="question4"]:checked') === null) { notAnswered++;
    
 }

else { question4 = document.querySelector('input[name="question4"]:checked').value;
document.querySelector('input[name="question4"]').checked=false;


if (question4 === "d") {
    correct++;
}
else if (question4 === "a" || "b" || "c") {
    incorrect++;
}}
// question 5
if (document.querySelector('input[name="question5"]:checked') === null) { notAnswered++;
    
 }

else { question5 = document.querySelector('input[name="question5"]:checked').value;
document.querySelector('input[name="question5"]').checked=false;


if (question5 === "d") {
    correct++;
}
else if (question5 === "a" || "b" || "c") {
    incorrect++;
}}
// question 6
if (document.querySelector('input[name="question6"]:checked') === null) { notAnswered++;
    
 }

else { question6 = document.querySelector('input[name="question6"]:checked').value;
document.querySelector('input[name="question6"]').checked=false;


if (question6 === "c") {
    correct++;
}
else if (question6 === "a" || "b" || "c") {
    incorrect++;
}}
//  question 7
if (document.querySelector('input[name="question7"]:checked') === null) { notAnswered++;
   
 }

else { question7 = document.querySelector('input[name="question7"]:checked').value;
document.querySelector('input[name="question7"]').checked=false;


if (question7 === "a") {
    correct++;
}
else if (question7 === "a" || "b" || "c") {
    incorrect++;
}}
// question 8
if (document.querySelector('input[name="question8"]:checked') === null) { notAnswered++;
    
 }

else { question8 = document.querySelector('input[name="question8"]:checked').value;
document.querySelector('input[name="question8"]').checked=false;


if (question8 === "b") {
    correct++;
}
else if (question8 === "a" || "b" || "c") {
    incorrect++;
}}
// question 9
if (document.querySelector('input[name="question9"]:checked') === null) { notAnswered++;
   
 }

else { question9 = document.querySelector('input[name="question9"]:checked').value;
document.querySelector('input[name="question9"]').checked=false;


if (question9 === "c") {
    correct++;
}
else if (question9 === "a" || "b" || "c") {
    incorrect++;
}}
// question10
if (document.querySelector('input[name="question10"]:checked') === null) { notAnswered++;
    
 }

else { question10 = document.querySelector('input[name="question10"]:checked').value;
document.querySelector('input[name="question10"]').checked=false;


if (question10 === "c") {
    correct++;
}
else if (question10 === "a" || "b" || "c") {
    incorrect++;
}}
    // this toggles what is visible on their screen.
    document.getElementById("quiz").style.display = "none";
    document.getElementById("scoreBox").style.display = "block";
    document.getElementById("some_div").style.display = "none";
    document.getElementById("ta-button").style.display = "inline-block";
    // this is the text for our score box
    correctText.textContent = "Correct " + correct;
    incorrectText.textContent = "Incorrect " + incorrect;
    notAnsweredText.textContent = "Not Answered " + notAnswered;
    

}

function reset() {
    // this toggles what is visible on their screen.
    document.getElementById("quiz").style.display = "none";
    document.getElementById("some_div").style.display = "none";
    document.getElementById("ta-button").style.display = "none";
    document.getElementById("scoreBox").style.display = "none";
    document.getElementById("main-button").style.display = "block";
    // this resets the score
    correct = 0;
    incorrect = 0;
    notAnswered = 0;
    // allows the start button to be clicked up to 20 mins after the ta button, so that the score function does start before the game.
    timeLeft = 12000;
    

}

<div id="button-container">
                            <div id="ta-button">
                                <p id="main-button"><button type="button" class=" btn-lg btn-block text-light "
                                onclick="reset()"><i class="fas fa-sync"></i> Try Again? <i class="fas fa-sync"></i></button></p>
                                </div>
                        </div>

<div id="button-content" class="container">
                <p id="main-button"><button type="button" class=" btn-lg btn-block text-light "
                        onclick="start();countdown()"><i class="fas fa-user-astronaut"></i> Start
                        Quiz. <i class="fas fa-user-astronaut"></i></button></p>
                        
                </div>

Could you share more of your code? It's unclear where the timer gets setup and how the submit button is handled. Seems like you'd probably need to call `clearTimeout` in your submit button handler. — Scotty Waggoner, Mar 08 '19 at 02:49
The other thing I noticed is the reset function works if you answer the questions and then submit; if you run out of time then when you start the game the time does not count down. — J91Branson, Mar 08 '19 at 03:07
Possible duplicate of [Function in javascript that can be called only once](https://stackoverflow.com/questions/12713564/function-in-javascript-that-can-be-called-only-once) — Darth Veyda, Mar 08 '19 at 03:40

score 0 · Accepted Answer · answered Mar 08 '19 at 02:47

Try this.

var timerId = null;
    var timeLeft = 70;
    function countDown() {
        if (timerId) {
            clearTimeout(timerId);
        }

        //do what ever
        if (timeLeft < 1) {
            //do something else

            //then return
            return 0;
        }
        else {
            timerId = setTimeout(countDown, 1000);
        }
    }

    function start() {
        //do whatever

        timerId = setTimeout(countDown, 1000);
    }

If you need more info on timers in javascript check out https://www.w3schools.com/jsref/met_win_settimeout.asp

I have a question about getting a function to not run if it is already run

1 Answers1