Question

我无法弄清楚为什么attackGoblin函数不会写到我的HTML中（上面的函数写到完全相同的空间没有问题）。我根本无法写任何东西。逃逸功能很好用，我觉得这是一回事。

我就像一个星期，只是为了好玩而学习，但这真让我发疯。另外，我知道我不应该用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

在第一次运行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
}

希望这会有所帮助！

Answer 2

您需要查看控制台。在这里您可以判断出遇到的错误类型。与使用大多数编程语言不同，如果网页由于错误而挂起，它们仍将继续运行，并且不会在您的脸上留下错误窗口。

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

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

祝你好运。：）

无法使innerHTML在特定位置工作。我不明白

2 个答案: