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
– Assertion, Commented Apr 14, 2016 at 2:22
Any errors in the console? Also, you should edit your question to include that relevant bit of information — Maria Ines Parnisari
– Maria Ines Parnisari, Commented Apr 14, 2016 at 2:23
Well locally I used "gender" instead of "sex" but here's a screenshot of my local browser including the error. gyazo.com/3f03c38589f0ccb64966c83192c55ab1 — Assertion
– Assertion, Commented Apr 14, 2016 at 2:25

Community · Accepted Answer · 2017-05-23 12:31:17Z

1

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).

edited May 23, 2017 at 12:31

CommunityBot

11 silver badge

answered Apr 14, 2016 at 2:31

Maria Ines Parnisari

17.5k10 gold badges95 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How do I modify a table data element using JavaScript?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related