setTimeout conflict in Javascript

Question

I am new here and new to JV/web-dev and trying to create a light-weight reaction game in JS and running into a few issues:

1. I am trying to initialize the game once a button is clicked, but I am finding that upon page refresh the game starts on it's own? I call the button fxn "time_init()" at the bottom of the script but it still loads on its own?

2. How do I go about making the game only go for a set time like 15seconds? It continues on...? I feel the setTimeout method is lacking or i'm using it wrong?

3. Lastly, if I want to count the number of times a square is clicked versus a circle and output their reaction time after that, what is the best way to do it? I'm thinking just creating a while-loop that just counts the number of times a square is clicked while the game is being played..

Here is the code I have so far:

<input type="button" value="Start" onclick="time_init()" />

<p class="bold">Your time: <span id="time">0</span>s</p>

<div id="box"></div>

<script type="text/javascript"> 

var clickedTime; var createdTime; var reactionTime;

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color +=letters[Math.round(Math.random() * 15)];
    }
    return color;
}

function time_init() {
setTimeout('makeBox()', 1000);}


function makeBox() {

    var time=Math.random();

    time=time*1500;

    setTimeout(function() {
        if (Math.random()>0.5) {
            document.getElementById("box").style.borderRadius="100px";
        } else {
            document.getElementById("box").style.borderRadius="";
        }

        var top=Math.random();
        top=top*500;
        var left=Math.random();
        left=left*800;

        document.getElementById("box").style.top=top+"px";

        document.getElementById("box").style.left=left+"px";

        document.getElementById("box").style.backgroundColor=getRandomColor();

        document.getElementById("box").style.display="block";

        createdTime=Date.now();

    }, time);

}

document.getElementById("box").onclick=function() {

    clickedTime=Date.now();

    reactionTime= (clickedTime - createdTime)/1000;

    document.getElementById("time").innerHTML=reactionTime;

    this.style.display="none";

    makeBox();

}

time_init();

Answer 1

You are explicitly calling time_init(); at the end of your code. That will kick things off immediately, and call makebox() after 1 second.

If you want to shut things down after 15 seconds, create a flag variable and another timeout to flip it after that time. Then you check that flag variable whenever you do anything to decide if you keep doing it or not.

var isRunning = true;
setTimeout( function() { isRunning=false; }, 15000 );

document.getElementById("box").onclick=function() {

    clickedTime=Date.now();

    reactionTime= (clickedTime - createdTime)/1000;

    document.getElementById("time").innerHTML=reactionTime;

    this.style.display="none";

    if ( isRunning ) {
        makeBox();
    }
}