Search code examples
javascripthtmlinnerhtml

I can't figure out how to configure "innerHTML" to print text under a contact card


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 provided in our index.html file (Full name, email, and message) and place them under the "Contacts" box.

I made it toward the bottom of the instructions (Part 2 - JavaScript), and now I'm stuck on the last 3 bullet points.

Full Instructions (Below is the last piece I'm stuck on)

  • Use innerHTML to post the full name entered into the input to the tag in our Contact Card that has the id of postFullName.
  • Use innerHTML to post the email entered into the input to the tag in our Contact Card that has the id of postEmail.
  • Use innerHTML to post the message entered into the input to the tag in our Contact Card that has the id of postMessage.

Desired Result (Template)

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 (Updated)

var btn = document.getElementById('btn');
btn.addEventListener ("click", function getName(event) {
    event.preventDefault();
})

function getInfo() {
    var fullName = document.getElementById("name").value;
    var Email = document.getElementById("email").value;
    var Message = document.getElementById("message").value;

    alert(result);
}

Attempt #2 (Old/Outdated)

var btn = document.getElementById('btn');
btn.addEventListener ("click", function getName(event) {
    event.preventDefault();
})

function getInfo(){
var fullName = document.getElementById("name").innerHTML; alert (fullName);
var email = document.getElementById("email").innerHTML; alert (email);
var message = document.getElementById("message").innerHTML; alert (message);
}

Attempt #3 (Old/Outdated)

var btn = document.getElementById('btn');
btn.addEventListener ("click", function getName(event) {
    event.preventDefault();
})

function getInfo(){
var fullName = document.getElementById("name");
    fullName.innerHTML = ("contactCard");
var email = document.getElementById("email");
    email.innerHTML = ("contactCard");
var message = document.getElementById("message");
    email.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!


Solution

  • You need to add the values collected to the desired element's innerHTML, so the full working code will be as follows:

    var submitBtn = document.getElementById('btn');
    btn.addEventListener ("click", function(event) {
        event.preventDefault();
        getAndPopulateInfo();
    })
    
    function getAndPopulateInfo() {
        var fullName = document.getElementById("name").value;
        var Email = document.getElementById("email").value;
        var Message = document.getElementById("message").value;
    
        var contactsName = document.getElementById('postFullName');
        var contactsEmail = document.getElementById('postEmail');
        var contactsMessage = document.getElementById('postMessage');
    
        contactsName.innerHTML = fullName;
        contactsEmail.innerHTML = Email;
        contactsMessage.innerHTML = Message;
    }
    

    Here is a working codepen link, you can refer this https://codepen.io/saidarshan/pen/MWxZwjZ

    Hope this helps you. Please comment if there are any doubts regarding the answer.