两次调用Javascript函数

Question

我试图在不同的函数中两次调用一个函数。 第一个功能创建两个按钮，并添加一个onclick事件。 我需要多次执行此操作，但无法正常工作！ 这是我的Javascript：

// PLAYER INFO
var playerHP = 100;
var playerAt = 10;
var playerDef = 0;
var gold = 0;
//ENEMY FROG INFO
var enemy = 'FROG';
var enemyHP = 50;
var enemyAt = 5;
var loot = 5;
//FOF
function fof() {
  var fight = document.createElement("BUTTON");
  var t = document.createTextNode("FIGHT!");
  fight.appendChild(t);
  fight.id='attack';
  document.body.appendChild(fight);
  document.getElementById('attack').addEventListener('click', attack);

  var or = document.createElement("P");
  var g = document.createTextNode("or");
  or.appendChild(g);
  document.body.appendChild(or);

  var flee = document.createElement("BUTTON");
  var p = document.createTextNode("FLEE!");
  flee.appendChild(p);
  flee.id = 'flee';
  document.body.appendChild(flee);
  document.getElementById('playerflee').addEventListener('click', flee);
}
//ENEMY ATTACK
function enemyAttack() {
  playerHP = playerHP - enemyAt;
  var enemyFight = document.createElement('P');
  var t = document.createTextNode('The enemy attacked you! You now have '+ playerHP + ' HP left!');
  enemyFight.appendChild(t);
  enemyFight.id = 'enemyattack';
  document.body.appendChild(enemyFight);
  fof();
}
//FIGHT
function attack() {
  enemyHP = enemyHP - playerAt;
  var playerAttack = document.createElement('P');
  var t = document.createTextNode('You attacked the enemy! It has ' + enemyHP + ' HP left!');
  playerAttack.appendChild(t);
  playerAttack.id = 'attack';
  document.body.appendChild(playerAttack);
  enemyAttack();
}
//FLEE
function flee() {
  var spare = document.createElement('P');
  var t = document.createTextNode('You ran away! You gained 0 loot!');
  spare.appendChild(t);
  spare.id = 'playerflee';
  document.body.appendChild(spare);
}
//Enemy Spawn
function spawn(){
    var p = document.createElement("P");
    var t = document.createTextNode("A wild FROG appeared! He has " + enemyHP + ' HP and ' + enemyAt+ ' attack! Will you...');
    p.appendChild(t);
    document.body.appendChild(p);
    fof();
}

正如你所看到的，我叫fof()在两次-一次spawn()一次在enemyAttack() 我知道它首先起作用，因为我第一次调用它时起作用。 但是，当我enemyAttack()第二个enemyAttack() ，它不起作用！ 任何帮助，将不胜感激。

另外，我的HTML只是一个带有onclick事件的按钮，该事件调用了spawn()

Answer 1

ID是唯一的，具有任何给定ID的文档中只能有一个元素。 知道这一点， document.getElementById('attack')每次仅返回DOM中的第一个元素。

由于您已经有了元素，因此无需查找

function fof() {
    var fight = document.createElement("BUTTON");
    var t     = document.createTextNode("FIGHT!");

    fight.className = 'attack';
    fight.addEventListener('click', attack);

    fight.appendChild(t);
    document.body.appendChild(fight);



    ...