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）

不過，您可能應該使用兩個元素。