JS ReferenceError: getActivityTables is not defined at onload-CodePudding

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 onl oad="getActivityTables()">    
    <div id="" >
        <div >
            <h1>Running Activities</h1>
            <table id="runningActivity-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.

CodePudding user response：

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.

CodePudding user response：

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 onl oad="getActivityTables()">    
    <div id="" >
        <div >
            <h1>Running Activities</h1>
            <table id="runningActivity-table" >
            </table>
        </div>                
    </div>
<script src="scripts.js"></script>
</body>

if problem still in scripts.js file add :

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