So basically im trying to inject information that comes from my database (im using postgresSQL and node.js) into the webpage and i have confirmed that im getting the information i want right before trying to innerHTML however as soon as it goes to that codeline somehow it can't detect the value and inject undefined (i think) and im not sure why it's doing that.
here is the javascript for the html page im having problems :
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);
}
}
I find it really weird since i have done it similarly with another page and it works fine.
here is the html for the page:
<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>
I don't know why fills that field with undefined since when i stringify what the ajax return it shows that it has exactly what i need, one of those fields being the cour_name row.
I'd really appreciate if someone could help me with this problem and thank you for your time.
if using chrome browser , try devtool debugger.
open the DevTool (e.g. press F12) then click on sources tab and locate your javascript file and put a breakpoint on the line this not working as expected. then reload the page and check the value of variables and executes the rest of the code line by line.
see this tutorial on how to use debugger https://developer.chrome.com/docs/devtools/javascript/