Actualmente tengo dos páginas, CarRace.html, la segunda es JavaScript.js. CarRace contiene tres botones y dos imágenes (cada una es una imagen de un automóvil). Cuando se hace clic en el botón StartRace, se generará un número aleatorio para cada automóvil y se repetirá cada segundo. Los dos números generados son la distancia que debe moverse cada imagen. Actualmente nada se mueve.
Código de carrera de autos:
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>Su código JavaScript cambia la propiedad left de los autos, sin embargo, debe modificar su CSS para permitir que la propiedad left tenga efecto.
Después de agregar la posición relative a los elementos de los automóviles, se mueven como se esperaba.
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>