Вызов функции 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() twice- один раз в spawn() и один раз в enemyAttack(). Я знаю, что он работает в первом, так как он работает, когда я впервые назову его. Однако, когда я прихожу ко второму, enemyAttack(), он не работает! Любая помощь будет оценена по достоинству.

Кроме того, мой HTML это просто кнопка с onclick события вызывающего spawn()

Answer 1

идентификаторы уникальны, вы можете иметь только один единственный элемент в документе с любым заданным идентификатором. Зная это, 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); 



    ...