使用innerHTML将值注入html会返回未定义的结果



所以基本上,我试图将来自我的数据库的信息(我使用postgresSQL和node.js(注入到网页中,我已经确认我在尝试innerHTML之前已经得到了我想要的信息,但一旦它进入代码行,它就无法检测到值并注入未定义的信息,我不知道它为什么这么做。

以下是出现问题的html页面的javascript:

window.onload = async function() {
try {
let courseId = sessionStorage.getItem("courseId");
let course = await $.ajax({
url: `/api/courses/${courseId}/classes`,
method: "get",
dataType: "json"
});
document.getElementById("course").innerHTML = course.cour_name;
} catch (err) {
console.log(err);
}
}

我觉得这真的很奇怪,因为我在另一个页面上也做过类似的事情,而且效果很好。

这是页面的html:

<html>
<head>
<title>Express</title>
<link rel="stylesheet" href="/stylesheets/style.css">
<link rel="stylesheet" href="/stylesheets/courses.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js%22%3E</script>
<script src = "./javascript/courseInfo.js"></script>
</head>
<body>
<header id = "header">
</header>
<nav>
<a href= "courses.html"><p>Back</p></a>
</nav>
<section>
<main id="course">
</main>
</section>
</body>
</html>

我不知道为什么要用undefined填充该字段,因为当我字符串化ajax返回的内容时,它表明它正是我所需要的,其中一个字段是cour_name行。

如果有人能帮我解决这个问题,我将不胜感激,并感谢你抽出时间。

如果使用chrome浏览器,请尝试devtool调试器。

打开DevTool(例如按F12(,然后单击sources选项卡,找到您的javascript文件,并在这一行上放置一个断点——这并没有按预期工作。然后重新加载页面并检查变量的值,并逐行执行代码的其余部分。

请参阅本教程,了解如何使用调试器https://developer.chrome.com/docs/devtools/javascript/

最新更新