In a course I'm taking my lecturer wrote the below code for submitting data from a form when the submit button is pressed. It stores this to sessionStorage and then renders the received messages below the form. I made sure to copy it exactly and mine doesn't work. It seems to be because the .fullName, .email, .feedbackType and .comment are not being assigned a type. When I ran the lecturers code file from my vscode and checked it in the browser his worked fine. My work is identical to his bar some different CSS styles. It is currently just putting undefined for each item
function submitMessage(event) {
event.preventDefault();
const email = document.getElementById('email').value;
const fullName = document.getElementById('fullName').value;
const feedbackType = document.getElementById('feedbackType').value;
const comment = document.getElementById('comment').value;
const messageObject = {
email,
fullName,
feedbackType,
comment,
};
let currentMessages = [];
if (window.sessionStorage.getItem('messages')) {
currentMessages = JSON.parse(
window.sessionStorage.getItem('messages')
);
}
currentMessages.push({
messageObject
});
/*temporary fix, find a solution for this error, .push not working/recognised. Code matching lectures is currentMessages.push(messageObject)*/
window.sessionStorage.setItem(
'messages',
JSON.stringify(currentMessages)
);
renderMessages();
}
function renderMessages() {
let currentMessages = [];
if (window.sessionStorage.getItem("messages")) {
currentMessages =
JSON.parse(
window.sessionStorage.getItem("messages")
);
}
let listItems = [];
for (let i = 0; i < currentMessages.length; i++) {
let listItem = " ";
const currentMessage = currentMessages[i];
listItem += `<dt>${currentMessage.fullName} - ${currentMessage.email}</dt>`;
listItem += `<dd>${currentMessage.feedbackType}: ${currentMessage.comment}</dd>`;
listItem += `<br />`;
listItems.push(listItem);
}
let descList = document.getElementById('currentMessages');
descList.innerHTML = listItems.join('');
}
renderMessages();