尝试从innerhtml中获取innerhtml

Question

因此，我最近在尝试移动名为</p>的<p>结果的特定部分时遇到了一些问题。正因如此，我想，嘿！将result中的每个部分分解到另一个<p>中不是更容易吗？好吧，它是有效的，但是，尝试获取内部的<p>是很困难的，在这个原因中，我们称之为vault。我尝试了几种方法，但似乎无法从外部的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 ("result")中的ID"VAULT”。你知道为什么我不能抢金库吗？

Answer 1

有了Object-oriented JavaScript，你想要的东西就更容易了。

通常在编写JavaScript代码时，您希望尽可能独立于DOM (超文本标记语言)。

考虑以下示例：

​

/**
 * 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未捕获TypeError:无法读取nullCombat @ MonsterGen.html:426onclick @ MonsterGen.html:1

的属性'innerHTML‘

Answer 3

好的，我发现确实出了问题；这是<P>中的命名约定。

最初它是id='vault(" + loop + ")'...这将使它成为vault(1)等……

因此，我删除了方程式中的()，现在一切都很顺利。