Html Question posted in
Some basic documentation can be found here.

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!

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    So you have to set the innerHtml of the <p> elements inside the contactCard and you have to run the function when the button is clicked.

    The way I did this is I got the <p> from the contact card by using getElementById and then set it to the value of the name, email, or message.

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

function changeContacts(){
var fullName = document.getElementById("name");
document.getElementById("postFullName").innerHTML = fullName.value;
var email = document.getElementById("email");
document.getElementById("postEmail").innerHTML = email.value;
    
var message = document.getElementById("message");
    document.getElementById("postMessage").innerHTML = message.value;
}
    <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search