Question

所以我最近遇到了尝试移动 调用结果的特定部分的问题。因为我认为嘿！将结果中的每个部分分解为另一个会更容易！？好吧它工作lol然而试图抓住那个内部，在这个原因我们称之为金库是困难的。我已经尝试了几种方法，但似乎无法在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（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未捕获的TypeError：无法读取属性 nullCombat @ MonsterGen.html的'innerHTML'：426onclick @ MonsterGen.html：1

Answer 3

好的，我发现确实出了问题;这是中的命名惯例最初它是id='vault(" + loop + ")' ...这会使它vault(1)等....但是，getElement通过此调用("vault" + id)获取它，因此它将调用vault1 .. ..两个独立的id完全....这就是为什么它返回null 所以我删除了等式中的（），现在一切都运行得很漂亮。

试图从innerhtml中获取innerhtml

3 个答案: