addEventListener（）单击执行不正确

Question

我是javascript新手，并根据提示制作了一个小游戏。 我正在构建UI并逐步淘汰提示。 目前，我有一个主菜单和一个战斗菜单。 按下打斗将带您进入打斗菜单，并带有一系列动作。 在战斗菜单中按下“ ORA”后，应该会提示您进行攻击，然后将您带回到主菜单。

尽管确实发生了这种情况，但是当您回到主菜单时，它的作用就好像它仍在攻击菜单中一样。

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

从

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

和

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

我们可以看到您一直在使用相同的元素，因此，除非您清除事件监听器，否则无论当前ID是什么，都将触发它们。 （由于事件绑定到元素，而不是id）

不过，您可能应该使用两个元素。