clearInterval() not working

Question

SYNTAX ERRORS FIXED. Dreamweaver says that I have an error in my code on line 52. I can't see what is wrong? Maybe this has something to do with the fact that my if and else statements are not working.

IF AND ELSE STATEMENTS FIXED. If I test the if and else statements individually they work correctly, but when I run the entire document, they do not run. Could someone tell me if the error and my if/else statements not working are related or if there is something else wrong.

<script>
var car1=new Object();
car1.Name="Rusty";
car1.Speed="1px", 40;
car1.Distance=0;

var car2=new Object();
car2.Name="Dusty";
car2.Speed="2px", 40; 
car2.Distance=0;

var car3=new Object();
car3.Name="Crankshaft";
car3.Speed="4px", 40;
car3.Distance=0;

function runRusty(){

setInterval(function(){moveRusty()},40);

    function moveRusty(){car1.Distance=car1.Distance +1
        document.getElementById("rusty").style.marginLeft=car1.Distance + "px" 
        };
};


function runDusty(){

setInterval(function(){moveDusty()},40);

    function moveDusty(){car2.Distance=car2.Distance +1
        document.getElementById("dusty").style.marginLeft=car2.Distance + "px" 
        };
 };


function runCrankshaft(){

setInterval(function(){moveCrank()},40);

    function moveCrank(){car3.Distance=car3.Distance +1
          document.getElementById("crankshaft").style.marginLeft=car3.Distance + "px" 
        };
};


function winLose () {if (document.getElementById("rusty").style.marginLeft="900px"){
                     alert("Winner is Rusty!");
                     clearInterval(runRusty);
                     }

else    if(document.getElementById("dusty").style.marginLeft="900px"){
                    alert("Winner is Dusty!");
                    clearInterval(runDusty);
                    }

                else if(document.getElementById("crankshaft").style.marginLeft="900px"){
                    alert("Winner is Crankshaft!");
                    clearInterval(runCrankshaft);
                    };
                };
</script>

EDIT:

The if and else statements now work as I changed declared my functions globally and changed them slightly. The code now looks as such:

    var car1=new Object();
    car1.Name="Rusty";
    car1.Speed=1;
car1.Distance=0;

var car2=new Object();
car2.Name="Dusty";
car2.Speed=2; 
car2.Distance=0;

var car3=new Object();
car3.Name="Crankshaft";
car3.Speed=4;
car3.Distance=0;

var moveRusty;
var moveDusty;
var moveCrankShaft;


function runRusty(){

moveRusty=setInterval(function(){

        car1.Distance=car1.Distance + car1.Speed;
        document.getElementById("rusty").style.marginLeft=car1.Distance + "px";
        winLose();
        },40);
};


function runDusty(){

moveDusty=setInterval(function(){

        car2.Distance=car2.Distance + car2.Speed;
        document.getElementById("dusty").style.marginLeft=car2.Distance + "px"; 
        winLose();
        },40);
};

function runCrankshaft(){

moveCrankShaft=setInterval(function(){

        car3.Distance=car3.Distance + car3.Speed;
        document.getElementById("crankshaft").style.marginLeft=car3.Distance + "px"; 
        winLose();
        },40);
}

function winLose () {

    if (car1.Distance >= 900){
        alert("Winner is Rusty!");
        car1.Distance = 0;
        car1.Speed = 0;
        car2.Distance = 0;
        car2.Speed = 0;
        car3.Distance = 0;
        car3.Speed = 0;



    }

    else 

    if(car2.Distance >= 900){
        alert("Winner is Dusty!");
        car1.Distance = 0;
        car1.Speed = 0;
        car2.Distance = 0;
        car2.Speed = 0;
        car3.Distance = 0;
        car3.Speed = 0;


    }

    else 

    if(car3.Distance >= 900){
        alert("Winner is Crankshaft!");
        car1.Distance = 0;
        car1.Speed = 0;
        car2.Distance = 0;
        car2.Speed = 0;
        car3.Distance = 0;
        car3.Speed = 0;

    }
};

clearInterval(moveRusty);
clearInterval(moveDusty);
clearInterval(moveCrankShaft);

Everything works now. All the alerts happen and the position of the cars is reset. But all my clearInterval() do not work. I don't know if clearInterval() is the correct thing to use. What I want to do is reset the page so that I can run the "game" again. Right now, the only way to do that is by refreshing the page. I've double checked how I've declared my setInterval() and how I'm calling them in my clearInterval(), and as far as I can it's right?

score 2 · Answer 1 · answered Mar 12 '13 at 18:53

2

You are using clearInterval() wrong. You are passing it a function parameter whereas it expects an object.

// correct usage
var time = setInterval(stuff, 100);
clearInterval(time);

answered Mar 12 '13 at 18:53

Brad M

7,857
1
23
40

I created an object: `var rustyTimer=setInterval(function(){moveRusty()},40); function moveRusty(){car1.Distance=car1.Distance +1 document.getElementById("rusty").style.marginLeft=car1.Distance + "px" };` so my clearInterval() would look like this now `function winLose () {if (document.getElementById("rusty").style.marginLeft=="900px"){ alert("Winner is Rusty!"); clearInterval(rustyTimer); }` But now my code is broken & doesn't work like it did before I declared the object. Putting an object into the clearInterval() didn't work. – Riette du Toit Mar 12 '13 at 19:15
I also apologize for the lack of styling in my comment. I'm still getting used to this website. – Riette du Toit Mar 12 '13 at 19:19

score 0 · Answer 2 · answered Mar 12 '13 at 18:57

0

You have a semi colon before the else. ; which is a syntax error, remove it . You have a lot of them in weird places also, I suggest you don't put them after function declarations, if blocks if/else blocks, loop blocks etc.

answered Mar 12 '13 at 18:57

Musa

96,336
17
118
137

Thank you! That fixed the syntax errors. My if and else statements still don't work. Trying to figure out – Riette du Toit Mar 12 '13 at 19:05

score 0 · Answer 3 · edited May 23 '17 at 11:57

0

When you want to test if to things are 'equal' in a if statement, you need to use == or === and NOT =

if (document.getElementById("crankshaft").style.marginLeft = "900px") // WRONG
if (document.getElementById("crankshaft").style.marginLeft == "900px") // RIGHT
if (document.getElementById("crankshaft").style.marginLeft === "900px") // BETTER

Read the answer to the following question to know the difference between == and ===

Difference between == and === in JavaScript

Hope this helps

edited May 23 '17 at 11:57

Community

1
1

answered Mar 12 '13 at 19:08

Titouan de Bailleul

12,920
11
66
121

How does you HTML look like ? Do you have an element with id='Rusty' – Titouan de Bailleul Mar 12 '13 at 19:18
Yep, I do have an id='Rusty' – Riette du Toit Mar 12 '13 at 19:55

clearInterval() not working

3 Answers3