addEventListener（）单击执行不正确

Question

I'm new to javascript, and made a small game using prompts. I am in the process of building a UI and phasing out the prompts. At the moment I have a main menu, and a fight menu. Pressing fight takes you to the fight menu with a list of moves. After pressing "ORA" in the fight menu it is supposed to bring up a prompt stating the attack and then bringing you back to the main menu.

While this does happen, when you are brought back to the main menu it acts as if it is still in the attack menu.

document.getElementById("fight")
var fightMenu = fight.addEventListener("click", fightMenuFunction)

function fightMenuFunction() {
  document.getElementById("fight").id = "ora";
  document.getElementById("ora").innerHTML = "<p class='textstuff'>ORA</p>";
  document.getElementById("status").id = "get_angry";
  document.getElementById("get_angry").innerHTML = "<p class='textstuff'>GET ANGRY</p>";
  document.getElementById("blank1").id = "yell_dio";
  document.getElementById("yell_dio").innerHTML = "<p class='textstuff'>YELL DIO</p>";
  document.getElementById("blank2").innerHTML = "<p class='textstuff'></p>";

  var menuReturn = function() {
    document.getElementById("ora").id = "fight";
    document.getElementById("fight").innerHTML = "<p class='textstuff'>FIGHT</p>";
    document.getElementById("get_angry").id = "status";
    document.getElementById("status").innerHTML = "<p class='textstuff'>STATUS</p>"
    document.getElementById("yell_dio").id = "blank1";
    document.getElementById("blank1").innerHTML = "<p class='textstuff'>BLANK1</p>"
    document.getElementById("blank2").innerHTML = "<p class='textstuff'>BLANK2</p>"
  }

  document.getElementById("ora").addEventListener("click", function() {
    menuReturn();
    var oraoraAttack = Math.random();
    if (oraoraAttack >= 0.4 && buff == 0) {
      allyattackDamage(20);
    } else if (oraoraAttack >= 0.4 && buff >= 1) {
      allyattackDamage(40);
    } else {
      confirm("Your attack missed!")
      enemybattleSystem();
    }
  });
  document.getElementById("get_angry").addEventListener("click", function() {
    confirm("It works!");
  });
  document.getElementById("yell_dio").addEventListener("click", function() {
    confirm("It works!");
  });
}

Answer 1

From

function fightMenuFunction() {
  document.getElementById("fight").id = "ora";

and

var menuReturn = function() {
    document.getElementById("ora").id = "fight";

we can see you are using the same element the whole time, so unless you clear event listeners you will trigger them, no matter what the current id is. (As the event is bound to the element, not the id)

You probably should be using two elements though.