防止两个事件相互触发

Question

I have written a nonsensical program to demonstrate my problem.

What should happen

Pressing enter when the input field contains the word "text" displays the message "Don't change me until I'm ready"

waits for enter to be pressed again then clears the input field and display the message "Ha I changed you before you were ready"

What is happening

Pressing enter when the input field contains the word "text" triggers both events one right after other other.

** what I have tried**

• event.stopPropagation();
• using a Boolean variable to add and remove the container event as needed.

however, neither have fixed the problem.

 const inputField = document.querySelector('.inputField'); const inform = document.querySelector('.inform'); const container = document.querySelector('.container'); inputField.addEventListener('keydown', function(event) { if (event.key === "Enter") { /*event.stopPropagation();*/ matchInput(); } }); function matchInput() { if (inputField.value === "text") inform.innerHTML = "Don't change me until i'm ready"; window.addEventListener("keydown", nextInput); }; function nextInput() { if (event.key === "Enter") { inputField.value = ""; inform.innerHTML = "Ha I changed you before you were ready!"; container.removeEventListener("keydown", nextInput); } }; 

 <div class="container"> <input type="text" name="" value="text" autofocus class="inputField"> <div class="inform"> </div> 

Answer 1

you're making your life difficult... (tio, te estás complicando la vida...). Why don't you try with just one event handler:

inputField.addEventListener('keydown', function(event) {
  if (event.key === "Enter") {
     if (inputField.value === "text") inform.innerHTML = "Don't change me until i'm ready";
     else {
        inputField.value = "";
        inform.innerHTML = "Ha I changed you before you were ready!";
     }
  }
});