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)`;
}
JS
no requiere anteponerle el símbolo $. Esto es usado enPHP
mas no enJS
.