Question

我正在制作游戏，所以我盯着它看了一段时间（是的，我确实看过开发者日志控制台的错误），并且发现没有错误（在我的推理中）为什么它不能打开战斗功能

据说，无论出于什么原因，点击时没有定义巨人，点击时不会定义僵尸，而对于巨型蜘蛛，它会说出缺少参数的内容。我很确定它属于下面的代码 - ＆gt;

for(var z = 0; z < monsters.length; z++) {
  Gid("atkOpt_container").innerHTML += ("<div onclick='battle(" + monsters[z].name + "," + this.value + ")' class='monsterContainer' value=" + z + "><div class='monsterT'>" + monsters[z].name + "</div><table><tr><td>Strength</td><td>Health</td><td>XP</td><td>Level</td></tr><tr><td>" + monsters[z].dmg + "</td><td>" + monsters[z].hp + "</td><td>" + monsters[z].xp + "</td><td>" + monsters[z].lvl + "</td></tr></table></div>");
}

如果您希望查看下面的所有代码，请参阅下文。如果你想知道为什么一切都那么小，那是因为我在手机上制作它，并通过GitHub转发它。

var monsters = []; //All monsters are stored here
//All types of monsters are listed below
monsters.push(new monster_prototype("Giant", 50, 30, 1, 20, 20));
monsters.push(new monster_prototype("Giant spider", 20, 50, 1, 15, 30));
monsters.push(new monster_prototype("Zombie", 50, 50, 2, 40, 70));

for (var z = 0; z < monsters.length; z++) {
  Gid("atkOpt_container").innerHTML += ("<div onclick='battle(" + monsters[z].name + "," + this.value + ")' class='monsterContainer' value=" + z + "><div class='monsterT'>" + monsters[z].name + "</div><table><tr><td>Strength</td><td>Health</td><td>XP</td><td>Level</td></tr><tr><td>" + monsters[z].dmg + "</td><td>" + monsters[z].hp + "</td><td>" + monsters[z].xp + "</td><td>" + monsters[z].lvl + "</td></tr></table></div>");
} //Where I believe the error occurs, it basically loads all monster stats into a div

function Gid(id) {
    return document.getElementById(id);
  } //So I don't have to write the whole document.getElementById

function monster_prototype(name, hp, dmg, lvl, xp, money) {
    this.name = name;
    this.hp = hp;
    this.dmg = dmg;
    this.lvl = lvl;
    this.xp = xp,
      this.money = money;
  } //How I store the monsters info

function save() {
  localStorage.player = JSON.stringify(playerStats);
}

var playerStats = {
  lvl: 1,
  xp: 0,
  xpToLvl: 100,
  name: null,
  dmg: null,
  hp: null,
  money: 100
};

if (localStorage.player === undefined) {
  save();
  playerSetup();
} else {
  playerStats = JSON.parse(localStorage.player);
  alert("Welcome back " + playerStats.name);
  refreshStats();
} //Checks if the player is new, and if so starts the main player setup. If not it loads it

function refreshStats() {
    Gid("maxDmg").innerHTML = "Max damage: " + playerStats.dmg;
    Gid("hp").innerHTML = "Health: " + playerStats.hp;
  } //Refreshes some stats

function playerSetup() {
  document.getElementById("mainContainer").style.display = "none";
  $("#class_container").show();
}

function classChosen(pClass) {
    if (pClass === "Juggernaut") {
      playerStats.hp = 100;
      playerStats.dmg = 10;
    } else if (pClass === "Average Joe") {
      playerStats.hp = 60;
      playerStats.dmg = 30;
    } else {
      playerStats.hp = 40;
      playerStats.dmg = 70;
    }
    refreshStats();
    document.getElementById("class_container").style.display = "none";
    var getName = prompt("What is your name?");
    playerStats.name = getName;
    document.getElementById("mainContainer").style.display = "block";
    save();
  } //Starts the class choosing feature

function toggle(id) {
    $("#" + id).toggle();
  } //Toggles display (Hidden or block)

function restartGame() {
  localStorage.removeItem('player');
  location.reload();
}

function battle(enemy, enemyLoc) {
    console.log(enemy + " and " + enemyLoc);
    enemy = enemy.toLowerCase();

    Gid("attackInfo").innerHTML = "";
    var battleWords = ['slashed', 'bashed', 'stabbed', 'punched'];

    var enemyHp = monsters[enemyLoc].hp;
    var enemyDmg = monsters[enemyLoc].dmg;
    var playerHp = playerStats.hp;
    var playerDmg = playerStats.dmg;

    var battleLoop = setInterval(function() {
      var atkName1 = Math.floor(Math.random() * battleWords.length);
      var atkName2 = Math.floor(Math.random() * battleWords.length);
      var enemyDealt = Math.round(Math.random() * enemyDmg);
      var playerDealt = Math.round(Math.random() * enemyDmg);

      playerHp -= enemyDealt;
      enemyHp -= playerDealt;

      Gid("attackInfo").innerHTML += ("<strong>•</strong>" + enemy + " " + battleWords[atkName1] + " you and dealt " + enemyDealt + " damage to you and you now have " + playerHp + " health remaining.<br>You " + battleWords[atkName2] + " the " + enemy + " and dealt " + playerDealt + " damage. The " + enemy + " has " + enemyHp + " health remaining.<br><br>");

      if (enemyHp <= 0 && playerHp <= 0) {
        clearInterval(battleLoop);
        alert("You both died at the same time! A win... but mainly a loss. Game over");
        restartGame();
      } else if (enemyHp <= 0) {
        clearInterval(battleLoop);
        alert("You won!");
        playerStats.money += monsters[enemyLoc].money;
        playerStats.xp += monsters[enemyLoc].xp;

        if (playerStats.xp >= playerStats.xpToLvl) levelUp();
      } else if (playerHp <= 0) {
        alert("Game over");
        clearInterval(battleLoop);
        restartGame();
      }
    }, 1000);
  } //Main battle, this is the function that won't load

function levelUp() {

  } //TBA

#container {
  background-color: gray;
  width: 300px;
  height: 350px;
  margin: auto;
}
#atkOpt_container {
  display: none;
}
#attackBtn {
  background-color: black;
  width: 96px;
  color: yellow;
  border: 4px groove red;
  float: left;
  font-size: 30px;
  text-align: center;
  display: block;
  margin-top: 5px;
  margin-left: 5px;
}
#attackInfo {
  float: left;
  background-color: #eee;
  width: 200px;
  font-size: 10px;
  height: 250px;
  clear: left;
  display: block;
  margin-top: 5px;
  margin-left: 5px;
  border: 2px solid red;
}
#class_container {
  z-index: 10;
  display: none;
  width: 300px;
  height: 150px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-color: orange;
  overflow: auto;
  border: 5px groove black;
}
.playerClass {
  margin: auto;
  width: 200px;
  border: 5px groove red;
  color: #00FF00;
  font-size: 35px;
  text-align: center;
  margin-bottom: 5px;
  display: block;
  background-color: black;
}
#title {
  width: 95%;
  background-color: black;
  color: #00FF00;
  border: 1px solid orange;
  font-size: 25px;
  font-weight: bolder;
  text-align: center;
  margin: auto;
}
#atkOpt_container {
  z-index: 11;
  width: 275px;
  height: 300px;
  overflow: auto;
  background-color: black;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border: 2px solid orange;
}
.monsterContainer {
  width: 200px;
  margin: auto;
  text-align: center;
  background-color: orange;
  border: 5px groove red;
  margin-bottom: 5px;
}
.monsterT {
  width: 100%;
  background-color: black;
  color: #eee;
  font-size: 30px;
  text-align: center;
}
td {
  background-color: Cyan;
  font-size: 15px;
  width: 49%;
  border: 1px solid black;
}

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <div id="class_container">
    <div id="title">Choose a class</div>
    <div onclick="classChosen(this.innerHTML)" class="playerClass">Juggernaut</div>
    <div onclick="classChosen(this.innerHTML)" class="playerClass">Masculine Mat</div>
    <div onclick="classChosen(this.innerHTML)" class="playerClass">Average Joe</div>
  </div>
  <div id="mainContainer">
    <div id="container">
      <div id="attackBtn" onclick="toggle('atkOpt_container'); toggle('mainContainer');">Attack</div>
      <div id="attackInfo"></div>
      <div id="maxDmg">Max damage: 0</div>
      <div id="hp">Health: 0</div>
    </div>
    <button onclick="restartGame();">Delete stats</button>
  </div>
  <div id="atkOpt_container"></div>
</body>

</html>

Answer 1

由于

"<div onclick='battle(" + monsters[z].name + "," + this.value + ")'

产生

<div onclick='battle(whatever, whatever)'

哪个错了，因为你的字符串周围没有引号。你需要引用它们。所以添加"

"<div onclick='battle(\"" + monsters[z].name + "\",\"" + this.value + "\")'

理想情况下，您会使用createElement和addEventListener等DOM方法，因此您无需处理此问题。

JavaScript生成的元素不起作用

1 个答案: