Actualmente estoy tratando de hacer un sitio web donde si presiono q, la etiqueta p cambiará de "Q" a "A". Esto actualmente funciona con el siguiente código. Sin embargo, el problema es que al presionar q necesita volver a "A". Intenté hacerlo funcionar con removeEventListeners pero parece que no funciona.
<script>
document.addEventListener("keypress", event => {
if (event.key == "q") {
document.getElementById("P1").innerText = "Q"
}
});
</script>
Como @diegod sugirió en los comentarios, debe verificar qué carácter se muestra actualmente en el elemento p y cambiar el innerText consecuencia:
const p1 = document.getElementById("P1");
document.addEventListener("keypress", event => {
if (event.key == "q") {
if (p1.innerText == "A") {
p1.innerText = "Q";
} else {
p1.innerText = "A";
}
}
});
Usando el ejemplo del operador ternario :
const p1 = document.getElementById("P1");
document.addEventListener("keypress", event => {
if (event.key == "q") {
p1.innerText = p1.innerText == "A" ? "Q" : "A";
}
});
const $ = (prop) => document.querySelector(prop)
const changeToQ = () => {
$('p').innerText = 'Q'
}
const reset = () => {
$('p').innerText = 'A'
}
document.addEventListener('keydown', (e) => {
if (e.key === 'q') changeToQ()
})
document.addEventListener('keyup', (e) => {
if (e.key === 'q') reset()
})
creo que esto es lo que buscas
has intentado hacer otra declaración
else{ document.getElementById("P1").innerText = "A"}