試圖抓住innerhtml內的innerhtml

Question

因此，我最近遇到了一些問題，試圖移動一個叫做結果的特定片斷<p></p>。因此我想嘿！將結果中的每個部分拆分成另一個<p>並不容易！好吧，它工作大聲笑，但試圖抓住內心的<p>，在這個原因，我們稱之爲拱頂是困難的。我已經嘗試了幾種方法，但似乎無法在document.getElementByID中從外部獲取它的值....以下是html代碼。

document.getElementById("result").innerHTML = Monster + "<p id='vault'> || HP: " + HP + "</p> || Defense: " + Def + " || Attack: " + ATK + " || Can it Dodge/Block: " + DB + " || Can it retaliate: " + RET + " || Initative: " + INT + " || Exp: " + MEXP + " <input type='submit' class='new' onclick='Combat(" + loop + ")' value='FIGHT!'></input>" + "<br><br>" + A; 
          } 

那麼最終調用它

  function Combat(id){ 

       document.getElementById("vault").innerHTML = id; 
       document.getElementById("C").value = id 
} 

所以我嘗試腳本是改變ID 「C」 爲ID的 「Vault」 ID內（ 「結果」）。 關於爲什麼我不能搶金庫的任何想法？

Answer 1

Object-oriented JavaScript你想要什麼會更容易。

通常在編寫JavaScript時，您希望儘可能獨立於DOM（HTML）。

請看下面的例子：

/** 
 
* Monster 
 
*/ 
 
var Monster = (function() { 
 
    function Monster(HP, DEF, ATK, DB, RET, INT, MEXP) { 
 
     if (HP === void 0) { 
 
     HP = 100; 
 
     } 
 
     if (DEF === void 0) { 
 
     DEF = 10; 
 
     } 
 
     if (ATK === void 0) { 
 
     ATK = 100; 
 
     } 
 
     if (DB === void 0) { 
 
     DB = 10; 
 
     } 
 
     if (RET === void 0) { 
 
     RET = true; 
 
     } 
 
     if (INT === void 0) { 
 
     INT = 100; 
 
     } 
 
     if (MEXP === void 0) { 
 
     MEXP = 100; 
 
     } 
 
     this.HP = HP; 
 
     this.DEF = DEF; 
 
     this.ATK = ATK; 
 
     this.DB = DB; 
 
     this.RET = RET; 
 
     this.INT = INT; 
 
     this.MEXP = MEXP; 
 
    } 
 
    /** 
 
    * getHTML 
 
    */ 
 
    Monster.prototype.getHTML = function() { 
 
    return "HP: " + this.HP + " || Defense: " + this.DEF + " || Attack: " + this.ATK + " || Can it Dodge/Block: " + this.DB + " || Can it retaliate: " + this.RET + " || Initative: " + this.INT + " || Exp: " + this.MEXP; 
 
    }; 
 
    /** 
 
    * attacked 
 
    */ 
 
    Monster.prototype.attacked = function(damage) { 
 
    if (damage === void 0) { 
 
     damage = 0; 
 
    } 
 
    //check defences 
 
    if (damage > this.DEF + this.DB) { 
 
     //take damage 
 
     this.HP -= (damage - this.DEF + this.DB); 
 
    } 
 
    if (this.HP < 0) { 
 
     //Return true if it slew the monster 
 
     return true; 
 
    } else { 
 
     //Return false if the monster survived 
 
     return false; 
 
    } 
 
    }; 
 
    return Monster; 
 
}()); 
 
/** 
 
* Area 
 
*/ 
 
var Area = (function() { 
 
    function Area(name) { 
 
     if (name === void 0) { 
 
     name = "Vault"; 
 
     } 
 
     this.name = name; 
 
     this.monsters = []; 
 
    } 
 
    /** 
 
    * addMonster 
 
    */ 
 
    Area.prototype.addMonster = function(monster) { 
 
    this.monsters.push(monster); 
 
    return this; 
 
    }; 
 
    /** 
 
    * attackVault 
 
    */ 
 
    Area.prototype.assault = function(damage) { 
 
    if (damage === void 0) { 
 
     damage = 0; 
 
    } 
 
    //If no monster 
 
    if (this.monsters.length < 1) { 
 
     alert("You have cleared this vault"); 
 
     return true; 
 
    } else { 
 
     //If monsters exists, attack the first 
 
     var monsterKilled = this.monsters[0].attacked(damage); 
 
     //If the monster was killed 
 
     if (monsterKilled) { 
 
     //remove monster 
 
     this.monsters.splice(0, 1); 
 
     //Alert the player 
 
     alert("Well done hero!\nOnly " + (this.monsters.length) + " remaining!"); 
 
     } 
 
    } 
 
    //Return maybe monsters left? 
 
    return this.monsters.length < 1; 
 
    }; 
 
    return Area; 
 
}()); 
 
////GRAP HTML ELEMENT 
 
var output = document.getElementById("current-monster"); 
 
////RUNNING YOUR GAME 
 
//Build and populate world 
 
var vault = new Area(); 
 
vault 
 
    .addMonster(new Monster()) 
 
    .addMonster(new Monster()); 
 
//INTERACTION 
 
alert("Start"); 
 
//Hit the vault till it is empty 
 
while (vault.assault(45) != true) { 
 
    output.innerHTML = vault.monsters[0].getHTML(); 
 
    alert("Attack!"); 
 
} 
 
output.innerHTML = "Victory!";

<h1 id="title">Monster Game!</h1> 
 

 
<h2 id="current-monster"></h2>

知道怎樣才能輕鬆地訪問，雖然JavaScript的數據？

編寫JavaScript遊戲時，將重要的數據和結構保存在JavaScript中是有意義的。

Answer 2

Ok so i added the bit - ADyson suggested... 
         document.getElementById("result").innerHTML = Monster + "<p id='vault(" + loop + ")'> || HP: " + HP + "</p>" + " || Defense: " + Def + " || Attack: " + ATK + " || Can it Dodge/Block: " + DB + " || Can it retaliate: " + RET + " || Initative: " + INT + " || Exp: " + MEXP + " <input type='submit' class='new' onclick='Combat(" + loop + ")' value='FIGHT!'></input>" + "<br><br>" + A; 
         } 
       } 
     } 
     function Chest(id){ 
      window.open('LootGen.html', '_blank'); 
     } 
     function Combat(id){ 

      var id = document.getElementById("vault" + id).innerHTML; 
      document.getElementById("C").value = id; 

      submit(); 
     } 

但是現在當我在「）.innerHTML上運行它時」我得到一個

MonsterGen.html:426 Uncaught TypeError: Cannot read property 'innerHTML' of nullCombat @ MonsterGen.html:426onclick @ MonsterGen.html:1

Answer 3

好吧，我發現確切是錯了;這是<P>中的命名約定。
原來它是id='vault(" + loop + ")' ...這將使它vault(1) etc ....但是getElement得到這個電話("vault" + id)所以它會打電話vault1 ....因此兩個單獨的ID完全......這就是爲什麼它返回null。
所以我刪除了（）中的等式，現在一切都運行的很好。