CODEWITHSUNDEEP
javascriptinnerhtmlgetelementbyid
Jeff
Jeff

Reputation: 13

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

Upvotes: 0

Views: 90

Answers (2)

BobRodes
BobRodes

Reputation: 6165

You need to look in the console. That's where you can tell what kind of error you're getting. Unlike working with most programming languages, if web pages hang due to an error, they will still run what they can and not stick an error window in your face.

If you're using Chrome, the quickest way to look at the console is to right click somewhere on your page and select Inspect. Then click on the Console tab.

I think what it will tell you is that your attackGoblin() function is missing a closing curly brace: }. [EDIT: Since there is a closing curly brace, as Dorado has pointed out, I now think otherwise.]

Good luck. :)

Upvotes: 0

Ilya Streltsyn
Ilya Streltsyn

Reputation: 13536

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!

Upvotes: 1

Related Questions