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

I cannot figure out why the function attackGoblin won't write into my HTML (the above function is writing to the exact same space with no issue). I can't get it to write anything at all. The function flee works great, and I feel like it's the exact same thing.

I'm like a week in, and just learning for fun, but this is driving me nuts. Also, I know I shouldn't be writing script in my HTML, but I'm trying to go one step at a time for now. Anybody see what I need to fix? Much appreciated.

   <!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);
  }
}

Solution

After the first run of your goblinFight() function, you end up with the following HTML structure:

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

Next, when you click the inner div, you trigger the attackGoblin() function, and it works, but immediately after this the click event bubbles up to the outer div and triggers the goblinFight() function (again), which resets the effect of the first function.

To prevent this, you should pass the reference to the event object into the attackGoblin function (by changing the onclick handler to onclick="attackGoblin(event)") and make the function prevent event propagation:

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

Hope this helps!