Me gustaría usar un código cuando presiono la barra espaciadora aparece una forma y desaparece cuando la presiono nuevamente. Estoy tratando de hacer que addEventListener funcione con una muestra:
hello = document.querySelector('#Player'); siendo jugador la identificación de la forma que quiero controlar. Declaré hello arriba y lo inicialicé en la configuración (estoy usando JavaScript), la identificación del Player también se inicializó en HTML y se le dio una forma en CSS. cuando uso
hello.addEventListener('keypress', (event) => { console.log(event.key) })no pasa nada, pero cuando uso
window.addEventListener('keypress', (event) => { console.log(event.key) })funciona. ¿Hay algo que esté haciendo mal?
Eso es lo que debería pasar.
Puede agregar el evento de pulsación de tecla a la window o document .
Y, si lo agrega a ambos, la ventana gana por alguna razón; alguien más podría aclararnos esto a los dos.
const el = document.getElementById("el"); el.addEventListener("keypress", event => keyPressed(event, "blue")); document.addEventListener("keypress", event => keyPressed(event, "green")); window.addEventListener("keypress", event => keyPressed(event, "purple")); function keyPressed(event, color) { if (event.key = " ") el.style.backgroundColor = color; } #el { width: 100px; height: 100px; background: red; } <div id="el"></div>Es porque por defecto div no es seleccionable. Para que sea seleccionable, debe usar el atributo tabindex en su div . Hará que su div sea seleccionable.
const hello = document.querySelector('#player'); hello.addEventListener("keypress", evt => { console.log(evt.key) }) <div id="player" tabindex="0"> Player Shape </div> Mostrará un límite alrededor de su div que se puede eliminar usando css -
outline: none;