Usage of event listeners

September 26, 2022

Im currently trying to make a website where if i press q the p tag will change from "Q" to "A". This currently works with the code below. However the problem is that when pressing q it needs to go back to "A". I’ve tried making it work with removeEventListeners but it doesn’t seem to work.

<script>
    document.addEventListener("keypress", event => {
        if (event.key == "q") {
            document.getElementById("P1").innerText = "Q"
        }
    });
</script>

>Solution :

Like @diegod suggested in the comments you should check which character is currently shown in the p element and change the innerText accordingly:

const p1 = document.getElementById("P1");

document.addEventListener("keypress", event => {
  if (event.key == "q") {
    if (p1.innerText == "A") {
      p1.innerText = "Q";
    } else {
      p1.innerText = "A";
    }
  }
});

Using ternary operator example:

const p1 = document.getElementById("P1");

document.addEventListener("keypress", event => {
  if (event.key == "q") {
    p1.innerText = p1.innerText == "A" ? "Q" : "A";
  }
});