Currently I have two pages the CarRace.html the second is JavaScript.js. CarRace contains three buttons and two images (each is a picture of a car). When the StartRace button is clicked, a random number is to be generated for each car and is to repeat every second. The two numbers generated is the distance each image should move. Currently nothing moves.
CarRace Code:
var timer;
var ArandomNumber;
var BrandonNumber;
var x = 0
var q = 0
function GatherData() {
ArandomNumber = GetRandomNumA();
BrandonNumber = GetRandomNumB();
var thedivtop = document.getElementById("Move1");
x += 10;
thedivtop.style.left = x + 'px';
var thedivbottom = document.getElementById("Move2");
q += 10;
thedivbottom.style.left = q + 'px';
}
function StartRace() {
timer = setInterval(GatherData, 1000);
}
function GetRandomNumA() {
var x = Math.random();
x = Math.random() + 55;
return x;
}
function GetRandomNumB() {
var q = Math.random();
q = Math.random() + 55;
return q;
}<title>Race</title>
<script src="JavaScript.js"></script>
<style>
.moveable {
position: absolute;
height: 100px;
width: 200px;
}
</style>
</head>
<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 JavaScript code does change the cars' left property, however you need to modify your CSS in order to allow the left property take effect.
After adding relative position to the cars elements, they move as expected.
var timer;
var ArandomNumber;
var BrandonNumber;
var x = 0
var q = 0
function GatherData() {
ArandomNumber = GetRandomNumA();
BrandonNumber = GetRandomNumB();
var thedivtop = document.getElementById("Move1");
x += 10;
thedivtop.style.left = x + 'px';
var thedivbottom = document.getElementById("Move2");
q += 10;
thedivbottom.style.left = q + 'px';
}
function StartRace() {
timer = setInterval(GatherData, 1000);
}
function GetRandomNumA() {
var x = Math.random();
x = Math.random() + 55;
return x;
}
function GetRandomNumB() {
var q = Math.random();
q = Math.random() + 55;
return q;
}#Move1, #Move2 {
position: relative;
}<title>Race</title>
<script src="JavaScript.js"></script>
<style>
.moveable {
position: absolute;
height: 100px;
width: 200px;
}
</style>
</head>
<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>