无法让 innerHTML 在一个特定位置工作。我不明白

Question

我不明白为什么 attackGoblin 函数不会写入我的 HTML（上面的函数写入完全相同的 space 没有问题）。我根本无法让它写任何东西。函数 flee 很好用，我感觉是一模一样的东西。

我已经有一个星期了，只是为了好玩而学习，但这让我抓狂。另外，我知道我不应该在我的 HTML 中编写脚本，但我现在正尝试一步一个脚印。有人看到我需要修复什么吗？非常感谢。

   <!DOCTYPE html>
<html>

  <head>
<meta charset="utf-8">
<title>Status</title>
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
  </head>


  <body>
    <header>
      <h1>Stupid Game</h1>
    </header>

<div class="container">
  <table>
    <col width="90">
    <col width="90">
    <col width="600">
    <thead>
      <th colspan='2'>
        <h1>Status</h1>

      </th>
      <th colspan="2">
        <h1>Action

        </h1>
      </th>
      <tr>
        <th>
          <h2>HP</h2>
        </th>
        <th>
          <h2>
            <script>
              document.write(you._hp)

            </script>
          </h2>
        </th>
        <td id="actionTitle"> Click the door to enter the dungeon.</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="left">STR</td>
        <td class="left">
          <h3>
            <script>
              document.write(you._str)

            </script>
          </h3>
        </td>
        <td id="action" rowspan="5" colspan="4">
          <div id="actionLeft" onclick="goblinFight()"><img src="https://images-na.ssl-images-amazon.com/images/I/713sQo9DrQL.png" height="200" width="200">

          </div>
          <div id="actionMiddle"> </div>
          <div id="actionRight"> </div>

          <p id="combatMessage">Good Luck!</p>
        </td>



      </tr>
      <tr>
        <td class="left">INT</td>
        <td>
          <h3>
            <script>
              document.write(you._int)

            </script>
          </h3>
        </td>
      </tr>
      <tr>
        <td class="left">DMG</td>
        <td>
          <h3>
            <script>
              document.write(you._dmg)

            </script>
          </h3>
        </td>
      </tr>
      <tr>
        <td class="left">Status Effects</td>
        <td>
          <h3> - </h3>
        </td>
      </tr>
      <tr>
        <td class="left">Gold</td>
        <td>
          <h3>
            <script>
              document.write(you._gold)

            </script>
          </h3>
        </td>
      </tr>

    </tbody>
  </table>
</div>

<footer>

</footer>

<script>

function goblinFight() {
  document.getElementById("actionTitle").innerHTML = 'A goblin! Click the sword to attack or the door to flee.';
  document.getElementById("actionLeft").innerHTML = '<div onclick="attackGoblin()"><img src = "http://iconbug.com/data/80/256/5f0a7369c9651132688f02cbc49a7c28.png" width="120" height="120"></div>';
  document.getElementById("actionMiddle").innerHTML = '<img src = "https://marketplace.canva.com/MACg_sB88WY/1/thumbnail_large/canva-young-goblin-illustration-icon-MACg_sB88WY.png" width="240" height="240">';
  document.getElementById("actionRight").innerHTML = '<div onclick="flee()"><img src = "http://piskel-resizer.appspot.com/resize?size=200&url=http%3A%2F%2Fwww.piskelapp.com%2Fimg%2F551041a6-7701-11e6-8d38-1bbce077a660.png" width="120" height="120"></div>';
  document.getElementById("combatMessage").innerHTML = ''
}

function flee() {
  document.getElementById("actionTitle").innerHTML = 'Record what you left with.';
  document.getElementById("actionLeft").innerHTML = '<img src = "https://media.giphy.com/media/deWrNpLBRC60E/giphy.gif" width="300" height="300">';
  document.getElementById("actionMiddle").innerHTML = '';
  document.getElementById("actionRight").innerHTML = '';
  document.getElementById("combatMessage").innerHTML = 'Write down anything you left with.';
}

function attackGoblin() {
  document.getElementById("combatMessage").innerHTML = 'got him';
}
var you = {
  _maxHp: 12,
  _hp: 12,
  _str: 10,
  _int: 10,
  _dmg: '5-8',
  _gold: 0,
  _attack: function() {
    return Math.floor(Math.random() * 5 + 4)
  }
};
var goblin = {
  _hp: 8,
  _gold: Math.random(Math.floor() * 4),
  _attack: function() {
    return Math.floor(Math.random() * 3 + 2);
  }
}

Answer 1

您需要查看控制台。在那里你可以判断你遇到了什么样的错误。与使用大多数编程语言不同，如果网页因错误而挂起，它们仍会运行尽其所能，而不是将错误 [=26=] 贴在你的脸上。

如果您使用的是 Chrome，查看控制台的最快方法是右键单击页面上的某个位置，然后 select Inspect。然后单击 Console 选项卡。

我认为它会告诉您的是您的 attackGoblin() 函数缺少右大括号：}。 [编辑：由于是一个右大括号，正如 Dorado 所指出的，我现在不这么认为。]

祝你好运。 :)

Answer 2

在 goblinFight() 函数的第一个运行之后，您最终得到以下 HTML 结构：

<div id="actionLeft" onclick="goblinFight()">
   <div onclick="attackGoblin()">
      <img src="http://iconbug.com/data/80/256/5f0a7369c9651132688f02cbc49a7c28.png" width="120" height="120">
   </div>
</div>

接下来，当您单击内部 div 时，您会触发 attackGoblin() 函数， 并且它有效 ，但在此之后紧接着单击事件冒泡到外部div并触发goblinFight()函数（再次），这会重置第一个函数的效果。

为防止这种情况发生，您应该将事件对象的引用传递给 attackGoblin 函数（通过将 onclick 处理程序更改为 onclick="attackGoblin(event)"）并使该函数阻止事件传播：

function attackGoblin(e) {
  document.getElementById("combatMessage").innerHTML = 'got him';
  e.stopPropagation(); // cancels the bubbling of the event passed into the function
}

希望对您有所帮助！

无法让 innerHTML 在一个特定位置工作。我不明白

Can't get innerHTML to work in one specific spot. I do not understand

javascript

innerhtml

getelementbyid