How do I modify a table data element using JavaScript?

Question

I ran across an issue when I tried to modify an empty table data element by id with JavaScript.

For some reason the document.getElementById("tabledata").innerHTML = variable.property"did not change the data within the <td> element. This code has appeared to work when jsfiddle was used, but locally, the table data elements do not get modified by the JS.

JS

function Fish(name, breed, weight, sex) {
  this.name = name;
  this.breed = breed;
  this.weight = weight;
  this.sex = sex;
}

var jeremy = new Fish("Jeremy", "Salmon", 2.25, "Male");
var logan = new Fish("Logan", "Tuna", 3.48, "Male");
var stephanie = new Fish("Stephanie", "Bass", 5, "Female");
var emily = new Fish("Emily", "Catfish", 4.75, "Female");

document.getElementById("jeremyName").innerHTML = jeremy.name;
document.getElementById("jeremyBreed").innerHTML = jeremy.breed;
document.getElementById("jeremyWeight").innerHTML = jeremy.weight;
document.getElementById("jeremySex").innerHTML = jeremy.sex;
document.getElementById("loganName").innerHTML = logan.name;
document.getElementById("loganBreed").innerHTML = logan.breed;
document.getElementById("loganWeight").innerHTML = logan.weight;
document.getElementById("loganSex").innerHTML = logan.sex;
document.getElementById("stephanieName").innerHTML = stephanie.name;
document.getElementById("stephanieBreed").innerHTML = stephanie.breed;
document.getElementById("stephanieWeight").innerHTML = stephanie.weight;
document.getElementById("stephanieSex").innerHTML = stephanie.sex;
document.getElementById("emilyName").innerHTML = emily.name;
document.getElementById("emilyBreed").innerHTML = emily.breed;
document.getElementById("emilyWeight").innerHTML = emily.weight;
document.getElementById("emilySex").innerHTML = emily.sex;

HTML

<!DOCTYPE html>
<html>

  <head>
    <style>
      th {
        color: red;
      }

    </style>
    <script src="script.js"></script>
  </head>

  <body style="background-color: darkgray">
    <h1 style="text-align: center;font-size: 100px;">Fish in Captivity</h1>
    <table style="border: 2px solid black; border-collapse: collapse;width: 100%;font-size: 50px;">
      <caption>Fish</caption>
      <tr>
        <th>Name</th>
        <th>Breed</th>
        <th>Weight</th>
        <th>Sex</th>
      </tr>
      <tr>
        <td id="jeremyName"></td>
        <td id="jeremyBreed"></td>
        <td id="jeremyWeight"></td>
        <td id="jeremySex"></td>
      </tr>
      <tr>
        <td id="loganName"></td>
        <td id="loganBreed"></td>
        <td id="loganWeight"></td>
        <td id="loganSex"></td>
      </tr>
      <tr>
        <td id="stephanieName"></td>
        <td id="stephanieBreed"></td>
        <td id="stephanieWeight"></td>
        <td id="stephanieSex"></td>
      </tr>
      <tr>
        <td id="emilyName"></td>
        <td id="emilyBreed"></td>
        <td id="emilyWeight"></td>
        <td id="emilySex"></td>
      </tr>
    </table>
  </body>

</html>

Hmm. When I save both files and then reload the page in my local browser, it only shows the table headers. — Assertion, Apr 14 '16 at 02:22
Any errors in the console? Also, you should edit your question to include that relevant bit of information — Maria Ines Parnisari, Apr 14 '16 at 02:23
Well locally I used "gender" instead of "sex" but here's a screenshot of my local browser including the error. https://gyazo.com/3f03c38589f0ccb64966c83192c55ab1 — Assertion, Apr 14 '16 at 02:25

score 1 · Accepted Answer · edited May 23 '17 at 12:31

The error can be seen here: https://jsfiddle.net/4mtd7uun/. Note how I included the JavaScript in the head tag, as you did:

What's happening is this: you placed your <script> tag in the document's head. Therefore, the script runs and tries to manipulate the DOM before the page has finished loading (i.e. the DOM may not be ready yet).

You should either wrap your code inside $(document).ready (or something equivalent... read this answer), or put your <script> tag at the very bottom of your page (but inside the <body> tag).

How do I modify a table data element using JavaScript?

1 Answers1