调用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()两次 - 一次在enemyAttack()spawn()一次。我知道它在第一种情况下很有效，因为它在我第一次叫它时起作用。但是，当我来到第二个，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); 



    ...