Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

265
Views
Error javascript : Cannot read properties of null (reading 'innerHTML')

I'm just learning javascript, I'm using HTML DOM InnerHTML to display a list of data that I created and my code is based on OOP.

When it's on the page, it looks good. But when I move to another page, the error appears like this.

enter image description here

How can I get rid of the error. I want to display a list of data with innerHTML on another page but can't because of this error. This is my code :

let listCattle = [];

let nCattle = CattleDummy.length;
for (let i=0; i<nCattle; i++){
    s = CattleDummy[i];
    listCattle[i] = new Cattle();
    listCattle[i].addCattle(s._id, s.gender, s.cowType, s.age, s.weight, s.deseaseHistory, s.dateofDesease);    
}

tableCattle(listCattle);

function tableCattle(data){
    let table = document.getElementById('CattleTable')

    for(let i=0; i<data.length; i++){
        let row = `<tr>
                    <td>${data[i].getId()}</td>
                    <td>${data[i].getGender()}</td>
                    <td>${data[i].getSpecies()}</td>
                    <td>${data[i].getAge()}</td>
                    <td>${data[i].getWeight()}</td>
                    <td>${data[i].getDeseaseHist()}</td>
                    <td>${data[i].getHealthy()}</td>
                    <td>${data[i].getCondition()}</td>
                </tr>`
        table.innerHTML += row
    }
}

This is the code in monitoring page :

<div class="container" style="margin-top: 30px;">
        <table class="table">
            <thead>
            <tr>
                <td>ID</td>
                <td>Gender</td>
                <td>Species</td>
                <td>Age</td>
                <td>Weight</td>
                <td>Desease History</td>
                <td>Healthy</td>
                <td>Condition</td>
            </tr>
            </thead>
            <tbody class="table-group-divider" id="CattleTable">
            </tbody>
        </table>
    </div>

Edit : I know the problem is I've moved to another page where the 'CattleTable' id doesn't exist. Then how can I create another table on another page without displaying a CattleTable with innerHTML if the error is still there?

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!