JS ReferenceError: getActivityTables is not defined at onload

Question

Why is getActivityTables() not defined? The script is properly linked, and the function name is the same in the html as well as js file.

What am I doing wrong?

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Fitnessapp</title>
    <script src="scripts.js"></script>
</head>

<body onload="getActivityTables()">    
    <div id="" class="container">
        <div class="activityDiv">
            <h1>Running Activities</h1>
            <table id="runningActivity-table" class="table">
            </table>
        </div>                
    </div>
</body>

</html>

JS (scripts.js):

function getActivityTables() {
    console.log("test");
    // Get runningActivity-table
    let xhttp = new XMLHttpRequest();
    xhttp.onload = function () {
        let response;
        let responseString = xhttp.responseText;
        response = JSON.parse(responseString);
        console.log(response);

        let table = document.getElementById("runningActivity-table");
        let row, cell;
        let header = table.createTHead();
        row = header.insertRow(0);
        cell = row.insertCell();
        cell.innerHTML = "ID";
        cell = row.insertCell();
        cell.innerHTML = "Date";
        cell = row.insertCell();
        cell.innerHTML = "Duration";
        cell = row.insertCell();
        cell.innerHTML = "Distance";
        cell = row.insertCell();
        cell.innerHTML = "Description";

        for (let i = 0; i < response.length; i++) {
            row = table.insertRow();
            cell = row.insertCell();
            cell.textContent = response[i].id;
            cell = row.insertCell();
            cell.textContent = response[i].dateOfCreation;
            cell = row.insertCell();
            cell.textContent = response[i].durationInMinutes;
            cell = row.insertCell();
            cell.textContent = response[i].distanceInKm;
            cell = row.insertCell();
            cell.textContent = response[i].description;
        }

    }
    xhttp.open("GET", "/getRunningActivities");
    xhttp.send();

}

I cannot find the problem. I have the exact same code for another page and thats working properly.

Seems like a js file path problem. Can you see your js file is loaded on network tab? — 4b0, Dec 13 '22 at 11:43
There are only two possibilities: 1) `script.js` is not loaded at all. Check the request for `script.js` in the developertools. 2) there is a syntax error in `script.js` which prevents the browser from sucessfully evaluating it — derpirscher, Dec 13 '22 at 11:44

score 0 · Answer 1 · answered Dec 13 '22 at 11:57

0

I copied your entire code exactly in my vs code, and launched it, and everything is working.

The getActivityTables function worked fine.

But you can try to use the addEventListener() inside the javascript itself, it's better than the regular html events attributes.

But your code doesn't have any problems, I tried it myself.

You can capture the console and the network tab in your browser then we can figure out what's happened.

answered Dec 13 '22 at 11:57

Ahmed M. Znaty

416
9

The script.js file is loaded in the network tab. Stangely these code blocks are working in new files, but not in my original file. – Thoms Dec 13 '22 at 12:20
Really strange, but what can the reason be?!! – Ahmed M. Znaty Dec 13 '22 at 12:30

Yassin Mo · Answer 2 · 2022-12-13T12:50:47.910

try to remove <script src="scripts.js"></script> from the head tag And put it at the end of the Body tag

like this :

<body onload="getActivityTables()">    
    <div id="" class="container">
        <div class="activityDiv">
            <h1>Running Activities</h1>
            <table id="runningActivity-table" class="table">
            </table>
        </div>                
    </div>
<script src="scripts.js"></script>
</body>

if problem still in scripts.js file add :

window.addEventListener('load',getActivityTables())

JS ReferenceError: getActivityTables is not defined at onload

2 Answers2