I have a program with two images for cars and three buttons. The PauseRace button works fine. The StartRace button works except when an image hits 800 pixels the images should stop moving and an alert should show up declaring the winner. Lastly, the ResetRace button should move the images back to the begin and set all other values back to 0.
var timer;
var ArandomNumber;
var BrandonNumber;
var x = 0
var q = 0
function GatherData() {
ArandomNumber = GetRandomNumA();
BrandonNumber = GetRandomNumB();
var thedivtop = document.getElementById("Move1");
x += ArandomNumber;
thedivtop.style.marginLeft = x + 'px';
var thedivbottom = document.getElementById("Move2");
q += BrandonNumber;
thedivbottom.style.marginLeft = q + 'px';
}
function StartRace() {
timer = setInterval(GatherData, 500);
if (document.getElementById("Move1") == 800 + 'px' && document.getElementById("Move2") != 800 + 'px') {
alert("Car 1 has won the race!");
} else if (document.getElementById("Move1") != 800 + 'px' && document.getElementById("Move2") == 800 + 'px') {
alert("Car 2 has won the race!");
}
}
function GetRandomNumA() {
var x = Math.random();
x = Math.random() + 56;
return x;
}
function GetRandomNumB() {
var q = Math.random();
q = Math.random() + 56;
return q;
}
function PauseRace() {
clearInterval(timer);
}
function ResetRace() {
timer = 0;
x = 0;
q = 0;
document.getElementById("Move1") == 0 + 'px';
document.getElementById("Move2") == 0 + 'px';
}.moveable {
position: absolute;
height: 100px;
width: 200px;
}<body>
<b>First to 800 pixels wins!</b>
<br>
<br>
<b>Both cars start at 0 pixels.</b>
<br>
<br>
<input id="Button1" type="button" value="Start Race" onclick="StartRace()" />
<input id="Button1" type="button" value="Pause Race" onclick="PauseRace()" />
<input id="Button1" type="button" value="Reset Cars" onclick="ResetRace()" />
<br>
<br>
<div id="Move1">
<img id="Car1" class="moveable" src="delorean.jpeg" />
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="Move2">
<img id="Car2" class="moveable" src="duster.jpg" />
</div>
</body>Your if statements must be in GatherData() and you can just use x and q to check which is in front. Also, you need to check if one is ahead of the other in case both cross the finish line at the same time. I also added a clearInterval after the race finished.
var timer;
var ArandomNumber;
var BrandonNumber;
var x = 0
var q = 0
function GatherData() {
ArandomNumber = GetRandomNumA();
BrandonNumber = GetRandomNumB();
var thedivtop = document.getElementById("Move1");
x += ArandomNumber;
thedivtop.style.marginLeft = x + 'px';
var thedivbottom = document.getElementById("Move2");
q += BrandonNumber;
thedivbottom.style.marginLeft = q + 'px';
if (x >= 800 && x > q) {
alert("Car 1 has won the race!");
clearInterval(timer);
} else if (q >= 800) {
alert("Car 2 has won the race!");
clearInterval(timer);
}
}
function StartRace() {
timer = setInterval(GatherData, 500);
}
function GetRandomNumA() {
var x = Math.random();
x = Math.random() + 56;
return x;
}
function GetRandomNumB() {
var q = Math.random();
q = Math.random() + 56;
return q;
}
function PauseRace() {
clearInterval(timer);
}
function ResetRace() {
timer = 0;
x = 0;
q = 0;
document.getElementById("Move1") == 0 + 'px';
document.getElementById("Move2") == 0 + 'px';
}.moveable {
position: absolute;
height: 100px;
width: 200px;
}<body>
<b>First to 800 pixels wins!</b>
<br>
<br>
<b>Both cars start at 0 pixels.</b>
<br>
<br>
<input id="Button1" type="button" value="Start Race" onclick="StartRace()" />
<input id="Button1" type="button" value="Pause Race" onclick="PauseRace()" />
<input id="Button1" type="button" value="Reset Cars" onclick="ResetRace()" />
<br>
<br>
<div id="Move1">
<img id="Car1" class="moveable" src="delorean.jpeg" />
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="Move2">
<img id="Car2" class="moveable" src="duster.jpg" />
</div>
</body>