html JS引用错误:getActivityTables未在加载时定义

epggiuax  于 2022-12-16  发布在  其他
关注(0)|答案(2)|浏览(110)

为什么没有定义getActivityTables()?脚本链接正确,函数名在html和js文件中相同。
我哪里做错了?
超文本:

<!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(脚本. 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();

}

我找不到问题所在。我有另一个页面完全相同的代码,并且工作正常。

thtygnil

thtygnil1#

我完全复制了你的整个代码在我的vs代码,并启动它,一切都工作。
getActivityTables函数工作正常。
但是你可以尝试在javascript本身里面使用addEventListener(),它比常规的html事件属性要好。
但是你的代码没有任何问题,我自己试过了。
你可以在浏览器中捕获控制台和网络选项卡,然后我们就可以找出发生了什么。

axkjgtzd

axkjgtzd2#

尝试从head标记中删除<script src="scripts.js"></script>并将其放在Body标记的末尾
像这样:

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

如果scripts.js文件中仍然存在问题,请添加:

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

相关问题