我不知道如何配置“innerHTML”来打印联系人卡片下的文本

Question

我在学习如何开发代码方面是全新的，但我陷入了困境。

我们提供了 HTML 来复制/粘贴到我们的 index.html 文件中，我们需要在 script.js 文件中编写 JavaScript 来提取我们的 index.html 文件中提供的信息（全名、电子邮件和消息）并将其放置在“联系人”框下。

我已经完成了说明的底部（第 2 部分 - JavaScript），现在我陷入了最后 3 个要点。

（下面是我坚持的最后一块）

使用innerHTML将输入中输入的全名发布到我们的联系人卡片中ID为postFullName的标签中。
使用innerHTML将输入中输入的电子邮件发布到我们的联系人卡片中ID为postEmail的标签中。
使用innerHTML将输入中输入的消息发布到我们的联系人卡片中ID为postMessage的标签中。

（模板）

我附加了我一直在尝试的不同的“function getInfo()”字符串。他们可能完全偏离答案，或者可能接近答案；在这一点上，我不确定。无论哪种方式，都不会打印任何内容。

尝试#1（已更新）

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);
}

尝试＃2（旧/过时）

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);
}

尝试＃3（旧/过时）

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");
}

如果您需要了解“索引”选项卡中当前内容（以及我尝试提取的信息），我将在下面提供代码以供参考。

索引文件

<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>

任何帮助将不胜感激。谢谢！

Answer 1

您需要将收集到的值添加到所需元素的innerHTML中，因此完整的工作代码如下：

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;
}

这是一个有效的codepen链接，您可以参考这个https://codepen.io/saidarshan/pen/MWxZwjZ

希望这对您有帮助。如果对答案有任何疑问，请评论。

我不知道如何配置“innerHTML”来打印联系人卡片下的文本

问题描述投票：0回答：1

1个回答

最新问题

我不知道如何配置“innerHTML”来打印联系人卡片下的文本

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1