CODEWITHSUNDEEP
javascripthtmlfunctionevent-handling
Shadough
Shadough

Reputation: 31

Button not calling function correctly

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>

Upvotes: 0

Views: 54

Answers (1)

Tibrogargan
Tibrogargan

Reputation: 4603

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>

Upvotes: 1

Related Questions