0

Estoy haciendo un peruqeño ejercicio que mediante eentos de teclado una pequeña pelotita tiene que moverse dentro de un div, los movimeintos son controlados por switchs y al final intento añadir un valor Css translate mediante la propiedad 'style', al momento de correr el documento me aparece:

"Uncaught TypeError: Cannot read properties of null (reading 'style')"

Haciendo referencia a la propiedad style, tengo la sintáxis bien pero no entiendo el porqué del error.

Este es el código HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/styles.css">
<title>Keyboard Events</title>
</head>
  <body>
    <header class="header">
    <h1>Keyboard Events.</h1>
</header>

<main>
    <section id="seccion1" class="section">
        <article class="stage">
            <div class="ball">
                
            </div>
        </article>
    </section>

</main>

<script src="./main.js" type="module"></script>
</body>
</html>

Y este es el código JavaScript:

const d = document;
let x = 0; 
let y = 0;

export function moveBall(event, ball, stage) { 

const $ball = d.querySelector('ball'); 
const $stage = d.querySelector('stage'); 


console.log(event.keyCode);
console.log(event.key);



switch (event.keyCode) {
    case 37:


        x--; 
        
        break;

    case 38: 

 
       y--;   
        
        break;

    case 39: 

     
       x++; 
        
        break;

    case 40: 

   
        y++; 
        
        break;

    default:
        break;
}

$ball.style.transform = `translate (${x * 10}px, ${y * 10}px)`; 
}
3
  • Hola Marco, bienvenido, podrías cambiar <div class="ball"> por <div id="ball"> y const $ball = d.querySelector('ball'); por const $ball = d.getElementById('ball');, a ver si funciona, aprovecha y haz el recorrido de Bienvenida para entender mejor cómo funcionamos y de paso obtener una medalla!. Commented el 6 abr. 2023 a las 19:58
  • El nombramiento de variables o constantes en JS no requiere anteponerle el símbolo $. Esto es usado en PHP mas no en JS.
    – DjCrazy
    Commented el 6 abr. 2023 a las 20:17
  • ERROR RESUELTO, AGRADEZCO LAS RESPUESTAS DE LOS QUE SE TOMARON LA MOLESTIA EN APORTAR :). Commented el 6 abr. 2023 a las 23:00

1 respuesta 1

0

El error es de semantica en el uso del selector, es que d.querySelector no encuentra 'ball' porque el selector para saber que tiene que buscar una clase tiene que anteponer un '.', entonces tenes que usar d.querySelector('.ball'), igual si el selector busca un elemento por id utiliza '#', si solo lo dejas como 'ball' buscaria un tag de html que se llame [ball] que igual esta incorrecto en la semantica

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.