I have 2 HTML files and 1 javascript file. The first HTML file receives user input (username), uploads to the API server, and then redirects to the second HTML file that receives the username from the server and displays “Welcome username”.
My problem is that when I receive the name, it displays as undefined.
script:
function welcomeUser() {
console.log("In welcomeUser()");
get("http://example.com").then(function(response){
if(response.status == 200) {
console.log("case 200");
const username = String(response.data.id); //The username that was requested. In this case it is "myUserName".
const score = response.data.score; //The user's current score.
console.log(username, score);
display (username, score);
}
else {
//User "myUserName" not found.
//response.data is null
post("http://example.com", { id: response.data.id, score: 0 }); //create a new user.
}
});
}
function display(username, score) {
let message = "Welcome ".concat(username);
document.getElementById("welcome").innerHTML = message;
}
function get(url) {
console.log("In get()");
return new Promise((resolve, reject) => {
const http = new XMLHttpRequest();
http.onload = function() {
resolve({ status: http.status, data: JSON.parse(http.response) });
};
http.open("GET", url);
http.send();
});
}
/**
* @typedef {{status: number, data: User|Error}} Response
*/
/**
* @typedef {{id: string, score: number}} User
*/
HTML:
<body onload="welcomeUser()">
<h1 id="welcome"></h1>
<script src="app.js"></script>
</body>