Button not calling function correctly

Question

I am trying to call a function on a button click, but for some reason the button will not call the function. Dreamweaver does not show any syntax errors. Can anyone tell me why the button is not working?

    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="utf-8" />
    </head>
   <head>
   <title></title>


<script type="text/javascript">

        var imgObj = 0;
        var imgObj1 = 0;
        var animate;
        var animate1;

        function init(){
           imgObj = document.getElementById('red');
           imgObj.style.position= 'relative';
           imgObj.style.left = '0px';
           imgObj1 = document.getElementById('blue');
           imgObj1.style.position = 'relative';
           imgObj1.style.left = '0px';
        }

        function moveRight(){
           imgObj.style.left = parseInt(imgObj.style.left = 0) + Math.floor((Math.random() * 100) + 1) + 'px';

           animate = setTimeout(moveRight(), 1000); 
           imgObj1.style.left = parseInt(imgObj1.style.left = 0) + Math.floor((Math.random() * 100) + 1) + 'px';

           animate1 = setTimeout(moveRight(), 1000); 
           if (imgObj.style.left >= 1000px || imgObj1.style.left >= 1000px)
            {
                break;
                else if
                {
                    imgObj.style.left>= 1000
                    MessageBox.show("The Red Car has won the Race!");
                }
                else
                {
                    MessageBox.show("The Blue Car has won the Race!");
                }

            }
        }           
</script>

</head>

<body onload = "init()">

   <form>
    <input type="button" value="Start" onclick="moveRight()" />
    <br/><br/><br/><br><br/><br/><br/>
    <img id="red" src="redcar.png" alt="Car 1"/>
    <br/><br/><br/><br>
    <img id="blue" src="bluecar.png" alt ="Car 2" />

    </form>
</body>
</html>

One thing; setTimeout(moveRight(), 1000); should be setTimeout(moveRight, 1000); — Andy
– Andy, Commented May 3, 2016 at 6:49
Does the button click work? Aka, does adding an alert give you that alert? Is imgObj found correctly? And then yes, the timeout syntax. — Shilly
– Shilly, Commented May 3, 2016 at 6:50
You've missed a curly brace, and the condition in the first "else if". You have two <head> tags also. You've to check the 1000px values, because I'm pretty suer that they must be quoted. — dlopez
– dlopez, Commented May 3, 2016 at 6:51

Tibrogargan · Accepted Answer · 2016-05-03 07:30:15Z

1

Unfortunately there are so many errors that it's difficult to know where to start. The first answer to your question is that the button did nothing because your code doesn't compile. I don't know why Dreamweaver didn't report an error. Chrome's developer tools was more than happy to do so.

Here's a "working" version:

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
var imgObj = 0;
var imgObj1 = 0;
var animate1;

function init(){
   imgObj = document.getElementById('red');
   imgObj.style.position= 'relative';
   imgObj.style.left = '0px';
   imgObj1 = document.getElementById('blue');
   imgObj1.style.position = 'relative';
   imgObj1.style.left = '0px';
}

function moveRight(){
   var redPosition = parseInt(imgObj.style.left);
   imgObj.style.left = redPosition + Math.floor((Math.random() * 20) + 1) + 'px';
   var bluePosition = parseInt(imgObj.style.left);
   imgObj1.style.left = bluePosition + Math.floor((Math.random() * 20) + 1) + 'px';

   if (redPosition >= 1000 || bluePosition >= 1000)
   {
        if (redPosition >= 1000) {
            alert("The Red Car has won the Race!");
        }
        else
        {
            alert("The Blue Car has won the Race!");
        }
        return;
    }
    animate1 = setTimeout(moveRight, 50);
}
</script>
</head>
<body onload = "init()">
<form>
    <input type="button" value="Start" onclick="moveRight()" />
    <br/><br/><br/><br><br/><br/><br/>
    <img id="red" src="redcar.png" alt="Car 1"/>
    <br/><br/><br/><br>
    <img id="blue" src="bluecar.png" alt ="Car 2" />
</form>
</body>
</html>

edited May 3, 2016 at 7:30

answered May 3, 2016 at 6:59

Tibrogargan

4,6323 gold badges21 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Abhishek Over a year ago

can you tell me what all changes that you had to make for you to get it working?

Shadough Over a year ago

Thanks for taking a look. I guess I'll make the switch to Chrome for the time being. With the alerts, I understand that you cannot add custom buttons. Would there be a way to have a dialog box come up with a button to reset the race? The only way I can think of with my limited knowledge would be to have a button hidden on the page that becomes visible once the race is over.

Tibrogargan Over a year ago

@Shadough that would work fine, although it might be a better idea to have a button that's disabled until the race is over. Or use some racing themed imaged. Flags or something (i.e. Starts w/ image 1, changes to image 2 when race is over)

Prem Bikram Limbu Over a year ago

@Tibrogargan: Not nitpicking but alert will always "The Blue Car has won the Race!" because you forgot parseInt() here if (imgObj.style.left>= 1000) { alert("The Red Car has won the Race!"); } I am playing these game now.

Tibrogargan Over a year ago

@Prem Bikram Limbu Good catch. There's a things that could easily be improved.

|

Collectives™ on Stack Overflow

Button not calling function correctly

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related