新手求助：如何用innerHTML将表单内容显示到Contact Card中

我是编程开发新手，现在遇到了一个问题。要求复制给定的HTML到index.html，编写JavaScript代码提取表单里的全名、邮箱、消息信息，然后显示在“Contacts”盒子下方。我卡在了最后一步：用innerHTML把输入的全名显示到id为postFullName的元素、邮箱显示到postEmail、消息显示到postMessage。试了三个版本的getInfo函数都不行，下面是我的尝试代码和index.html代码，求帮忙解决。

尝试代码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");
}

index.html代码 #

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

问题分析与修复代码 #

你的代码存在几个核心问题：

1. 按钮点击事件未调用getInfo函数，表单提交时不会触发数据提取逻辑
2. 获取输入值的方式错误：input元素的内容存在value属性中，而非innerHTML
3. 未将获取到的值赋值给目标显示元素的innerHTML

修复后的JavaScript代码如下：

var btn = document.getElementById('btn');
btn.addEventListener("click", function(event) {
    event.preventDefault(); // 阻止表单默认提交跳转
    getInfo(); // 触发数据提取与显示逻辑
});

function getInfo() {
    // 获取输入框的内容
    var fullName = document.getElementById("name").value;
    var email = document.getElementById("email").value;
    var message = document.getElementById("message").value;

    // 将内容赋值给对应的显示元素
    document.getElementById("postFullName").innerHTML = `全名: ${fullName}`;
    document.getElementById("postEmail").innerHTML = `邮箱: ${email}`;
    document.getElementById("postMessage").innerHTML = `消息: ${message}`;
}

关键说明： #

• 在按钮点击事件处理函数中直接调用getInfo，确保提交时触发数据处理
• 使用value属性获取输入框内容，这是input元素的标准取值方式
• 通过getElementById定位到显示用的<p>元素，将获取到的内容赋值给它们的innerHTML，实现内容展示

内容的提问来源于stack exchange，提问作者user23400884