Попытка захватить innerhtml изнутри innerhtml

Question

Так что я недавно столкнулся с проблемами, пытаясь переместить определенные фрагменты <p></p> вызванный результат. как таковой я думал, эй! было бы не легче сломать каждую часть внутри результата вниз на другую <p>!? хорошо работает lol, но пытается захватить тот внутренний <p>, что по этой причине мы будем звонить в хранилище, это сложно. Я пробовал несколько методов, но can not, кажется, захватывает его значение извне в 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 
} 

Так что я пытаюсь это изменить идентификатор «C» в ИД «VAULT» внутри идентификатора («результат»). любые идеи о том, почему я не могу захватить хранилище?

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) и т. Д .... однако getElement получал его по этому звонку ("vault" + id), поэтому он назовет vault1 .... таким образом, два отдельных идентификатора целиком .... вот почему возвращал null.
Так что я удалил() в уравнение, и теперь все работает красиво.