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）

你可能应该使用两个元素。

addEventListener（）单击错误执行

1 个答案: