I’m brand new at learning how to develop code, and I’m stuck.
We were provided HTML to copy/paste into our index.html file, and we need to write JavaScript in our script.js file to extract information entered into “Full Name, Email, and Message” and place them under “Contacts.” I’ve attached some screenshots (instructions/result) to add a visual.
I made it toward the bottom of the instructions (Part 2 – JavaScript, #2), and now I’m stuck. I tried different strings of code to print information under “Contacts” and nothing seems to be registering.
Instructions
Desired Result
I have attached different “function getInfo()” strings I’ve been trying. They could be completely off, or perhaps close to the answer; at this point, I’m unsure. Either way, nothing is printing.
Attempt #1
var btn = document.getElementById('btn');
btn.addEventListener ("click", function getName(event) {
event.preventDefault();
})
function getInfo(){
var fullName1 = document.getElementById("name").innerHTML; alert (fullName1);
var email1 = document.getElementById("email").innerHTML; alert (email1);
var message1 = document.getElementById("message").innerHTML; alert (message1);
}
Attempt #2
var btn = document.getElementById('btn');
btn.addEventListener ("click", function getName(event) {
event.preventDefault();
})
function getInfo(){
var fullName1 = document.getElementById("name");
fullName1.innerHTML = ("contactCard");
var email1 = document.getElementById("email");
email1.innerHTML = ("contactCard");
var message1 = document.getElementById("message");
email1.innerHTML = ("contactCard");
}
If you need a visual of what is currently in my Index tab (and the information I’m trying to extract), I’ll provide the code for reference below.
Index File
<body>
<div id="content">
<h1>My Contact Form</h1>
<form>
<label for="fullName">Full Name</label>
<input id="name" type="text" name="fullName"><br>
<label for="email">Email</label>
<input id="email" type="text" name="email"><br>
<label for="message">Message</label>
<input id="message" type="text" name="message"><br>
<button id="btn" type="submit">Submit</button>
</form>
</div>
<div id="contactCard">
<h2>Contacts</h2>
<p id="postFullName"></p>
<p id="postEmail"></p>
<p id="postMessage"></p>
</div>
<script src="script.js"></script>
</body>
Any help would be greatly appreciated. Thank you!
