I have been working on creating a "Guest book" of sorts for a school project and im struggling quite a bit with the JavaScript piece. Im a complete novice when it comes to Js, and this is a beginners course.... but I cant seem to get my head around what I need to do in order to accomplish a function in Js.
DISCLAIMER - While I have done some searching online, I can sort of find snips and pieces of what I need to do, but im a complete novice to JavaScript so I am sorry in advance
Here is the ask.....
When someone puts their info into a form on a webpage, the form appends that info...takes the first and last name... and then dumps it into a list of "Guest book" names.
The Js, written as an array, takes that info that has been entered into the form and then attaches it at the end of the current list, displaying an updated copy
Here is my code......all being done using codepen found here: https://codepen.io/arkasylum/pen/GRMYwPZ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Contact Manager</title>
</head>
<body>
<div id="main">
<div id="form1">
<form id="entry" onsubmit="return processMyForm();">
<h3 id="mailing">Get added to the guest book!</h3>
First Name: <input class="input">
<br>
<br>
Last Name: <input class="input">
<br>
<br>
Email address: <input class="input">
<br>
<br>
<button id="submit">Click here to submit info</button>
</form>
</div>
<br>
<br>
<div id="signed">
<h1 id="pageTitle">Guest Book</h1>
<ul id="names">
<li>Erik Pauze</li>
</ul>
</div>
</div>
</body>
<foot>
</foot>
</html>
JS Code
let list = getElementById("names");
let data = [function.contact];
function contact(givenName, familyName, emailAddress)
{
this.name = givenName;
this.relation = familyName;
this.number = emailAddress;
}
data.names((item)={
let li = document.createElement("li");
li.innerHTMl = item;
list.appendChild(li);
})