Estoy tratando de mover la bola hacia la derecha, pero tengo este error: No se pueden establecer las propiedades de indefinido (configurando 'izquierda'). Traté de buscar, pero todas las respuestas dicen que mi código es correcto.
var ballSpeed = 3; var ballPosition = 0; var ballTime = 1; var ball = $('#ball'); function bT() { ballPosition = ballPosition + ballSpeed; ball.style.left = ballPosition + "px"; } var ii =setInterval(bT, 1); console.log(ii); .window{ background-color: #00FFDD; height:100vh; margin: 0px; } #ball{ position: absolute; height: 100px; width: 100px; border-radius: 50%; background-color: red; } <!DOCTYPE html> <body> <div class="window"> <div id="ball"></div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="index.js" charset="utf-8"></script> </body> </html>Usa esto en su lugar:
var ballSpeed = 3; var ballPosition = 0; var ballTime = 1; var ball = $('#ball'); function bT() { ballPosition = ballPosition + ballSpeed; ball.css('left', ballPosition); } var ii =setInterval(bT, 1); console.log(ii); .window{ background-color: #00FFDD; height:100vh; margin: 0px; } #ball{ position: absolute; height: 100px; width: 100px; border-radius: 50%; background-color: red; } <!DOCTYPE html> <body> <div class="window"> <div id="ball"></div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="index.js" charset="utf-8"></script> </body> </html>.css() , como se describe aquí.