He creado una aplicación que intenta aprender a escuchar eventos de teclado. Cuando presiono las teclas de flecha, el color de fondo de divs cambia. Sin embargo, me gustaría saber cómo cancelar el efecto, es decir. volver al color de fondo predeterminado, cuando presiono la misma tecla nuevamente.
document.addEventListener("keydown", pressKeyOn); const arUp = document.querySelector(".ar-up"); const arLeft = document.querySelector(".ar-left"); const arRight = document.querySelector(".ar-right"); const arDown = document.querySelector(".ar-down"); function pressKeyOn(e) { console.log(e); if (e.keyCode === 38) { arUp.style.backgroundColor = "red"; } else if (e.keyCode === 40) { arDown.style.backgroundColor = "green"; } else if (e.keyCode === 39) { arRight.style.backgroundColor = "navy"; } else if (e.keyCode === 37) { arLeft.style.backgroundColor = "violet"; } }Entonces, ¿cómo volver al original (por ejemplo, fondo amarillo), si presiono la tecla de flecha respectiva?
Puede crear una clase para todos los colores y alternarla con cada clic.
const arUp = document.querySelector(".ar-up"); const arLeft = document.querySelector(".ar-left"); const arRight = document.querySelector(".ar-right"); const arDown = document.querySelector(".ar-down"); function pressKeyOn(e) { if (e.keyCode === 38) arUp.classList.toggle("red") else if (e.keyCode === 40) arDown.classList.toggle("green") else if (e.keyCode === 39) arRight.classList.toggle("navy") else if (e.keyCode === 37) arLeft.classList.toggle("violet") } document.addEventListener("keydown", pressKeyOn); .red{ background-color: red;} .green{ background-color: green;} .navy{ background-color: navy;} .violet{ background-color: violet;} <div class="ar-up">ar-up</div> <div class="ar-left">ar-left</div> <div class="ar-right">ar-right</div> <div class="ar-down">ar-down</div>Aquí hay una versión más genérica usando classList.toggle
const colors = { "ArrowUp": "red", "ArrowDown": "green", "ArrowLeft": "navy", "ArrowRight": "violet" } document.addEventListener("keydown", function(e) { const key = e.key; if (colors[key]) document .querySelector(`.${key}`) .classList .toggle(colors[key]) }) .red { background-color: red; } .green { background-color: green; } .navy { background-color: navy; } .violet { background-color: violet; } <div class="ArrowUp">ar-up</div> <div class="ArrowLeft">ar-left</div> <div class="ArrowRight">ar-right</div> <div class="ArrowDown">ar-down</div>