Usage of event listeners-CodePudding

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>

CodePudding user response：

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";
  }
});

CodePudding user response：


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()
})

I think this is what are you looking for

CodePudding user response：

have your tried to make else statement

else{ document.getElementById("P1").innerText = "A"}