CODEWITHSUNDEEP
javascript
UKXK189
UKXK189

Reputation: 15

I can't get setInterval to work for me

I have a function called start that is triggered when you push the start button. The start function calls another function called getRandomImage. I want getRandomImage to repeat every 5 seconds, but I just can't get the setInterval method to work for me. I've tried putting the interval on the start function, but that just causes it to fire off once, and doesn't repeat. I've tried putting the interval on the getRandomImages function, but then it doesn't do anything. Essentially I am trying to make a color blindness test that flashes a random image every 5 seconds until 30 images have passed or the user clicks a button. I've been banging my head against this for over 8 hours, and am really questioning my choice in programming languages right now, lol.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"
    <title></title>
    <link rel="stylesheet" href="ColorPerceptionTest.css">


</head>

<body>
    <section>
        <img src="Default.png" id="defaultimage">

        <form>
            <input type="button" id="Button1" value="" onClick="">
            <input type="button" id="Button2" value="" onClick="">
            <input type="button" id="Button3" value="" onClick="">
            <br>
            <input type="button" id="Start" value="Start" onClick="start()">
            <input type="button" id="Help" value="Help" onClick="help()">
            <br>
            <p id="help"> </p>

        </form>

    </section>


    <script>
        var $ = function(id) {
            return document.getElementById(id);
        }

        $("Button1").style.display = "none";
        $("Button2").style.display = "none";
        $("Button3").style.display = "none";


        var imagesArray = ["3.gif", "05.gif", "5.gif", "6.gif", "7.gif",
                           "8.gif", "12.gif", "15.gif", "16.gif", "26.gif",
                           "29.gif", "42.gif", "45.gif", "73.gif",
                           "74.gif"];

        var runTimer = setInterval(start, 5000);

        function getRandomImage(imgAr, path) {
            path = path || 'images/';  
            var num = Math.floor( Math.random() * imgAr.length );
            var img = imgAr[ num ];
            var imgStr = '<img src="' + path + img + '" alt = "">';
            $("defaultimage").src = path + img;

            $("Button1").style.display = "initial";
            $("Button2").style.display = "initial";
            $("Button3").style.display = "initial";

            if(parseInt(img) < 8){
                $("Button1").value = parseInt(img);
                $("Button2").value = parseInt(img) - 2;
                $("Button3").value = parseInt(img) + 1;
            }else if(parseInt(img) > 7 && parseInt(img) < 29){
                $("Button1").value = parseInt(img) - 2;
                $("Button2").value = parseInt(img);
                $("Button3").value = parseInt(img) + 1;
            }else{
                $("Button1").value = parseInt(img) - 5;
                $("Button2").value = parseInt(img) - 9;
                $("Button3").value = parseInt(img);
            }
        }


        var start = function(){
            $("help").innerHTML = "";
            getRandomImage(imagesArray);
            $("Start").style.display = "none";
            $("Help").style.display = "none";


        }

        var help = function (){
            $("help").innerHTML = "This is a test designed to help you determine" +
                    " if you have a problem with seeing colors. When you press start, a series of " +
                    "random images will be displayed. You have 5 seconds to read the number and " + 
                    "select the correct button.";
        }

    </script>

</body>

Upvotes: -1

Views: 47

Answers (1)

Tony
Tony

Reputation: 2483

Try moving the setInterval call to a point where start is defined...

Your code works fine in this fiddle.

var start = function(){
    $("help").innerHTML = "";
    getRandomImage(imagesArray);
    $("Start").style.display = "none";
    $("Help").style.display = "none";
}
var runTimer = setInterval(start, 5000);

Update: To make it more clear, had OP written function start() the posted code would have been properly hoisted. But, as he used a function expression, start is undefined when setInterval is called.

Another update: Here's a forked fiddle to correct the timer based on the button and the comments below.

Upvotes: 2

Related Questions