HTML+JS评论页问题：仅显示单条评论，求多条评论添加方案

你的核心问题是每次提交评论时用新内容直接覆盖了旧的，把innerHTML =改成innerHTML +=就能实现追加，但为了让评论结构更清晰，建议给每条评论套一个容器，同时加上一些细节优化：

修改后的完整代码 #

HTML部分

<div class="info">
    Name <input type="text" id="name" placeholder="输入你的名字">
    Email <input type="email" id="email" placeholder="输入你的邮箱">
    <br>

    <h2>Leave your Book Review...</h2>
    <textarea maxlength="150" rows="5" cols="50" wrap="hard" id="review" placeholder="写下你的评论"></textarea>
    <br> Remaining <span id="info">150</span> characters

    <button onclick="getUserInput()"> Leave Review</button>

    <hr>
</div>

<div id="Reviews" class="reviews-container"></div>

JavaScript部分

// 页面加载时初始化字符计数
window.onload = function() {
    const reviewTextarea = document.getElementById("review");
    const infoSpan = document.getElementById("info");
    infoSpan.textContent = reviewTextarea.maxLength;

    reviewTextarea.addEventListener("input", function() {
        const remaining = this.maxLength - this.value.length;
        infoSpan.textContent = remaining;
    });
};

function getUserInput(){
    // 获取输入值并去除首尾空格
    const name = document.getElementById("name").value.trim();
    const email = document.getElementById("email").value.trim();
    const review = document.getElementById("review").value.trim();

    // 简单验证：必填项不能为空
    if (!name || !email || !review) {
        alert("请填写完整的评论信息");
        return;
    }

    // 创建单条评论的结构化HTML
    const commentHtml = `
        <div class="comment-card">
            <div class="comment-author">
                <strong>${name}</strong> <span class="comment-email">(${email})</span>
            </div>
            <div class="comment-content">${review}</div>
            <hr>
        </div>
    `;

    // 追加评论到容器，而非覆盖原有内容
    document.getElementById("Reviews").innerHTML += commentHtml;

    // 清空输入框，方便下一次提交
    document.getElementById("name").value = "";
    document.getElementById("email").value = "";
    document.getElementById("review").value = "";
    // 重置字符计数
    document.getElementById("info").textContent = document.getElementById("review").maxLength;
}

可选CSS（让评论更美观）

.reviews-container {
    margin-top: 20px;
    padding: 0 10px;
}

.comment-card {
    margin-bottom: 15px;
    padding: 10px;
    background-color: #f5f5f5;
    border-radius: 5px;
}

.comment-author {
    margin-bottom: 8px;
    color: #333;
}

.comment-email {
    font-size: 0.9em;
    color: #666;
    font-weight: normal;
}

.comment-content {
    color: #444;
    line-height: 1.5;
}

关键改动说明 #

• 替换innerHTML =为innerHTML +=：实现评论追加，而非覆盖原有内容
• 添加表单验证：避免提交空评论
• 提交后清空输入框：提升用户重复提交的体验
• 补全字符计数功能：让原HTML里的剩余字符提示生效
• 结构化评论容器：通过CSS让每条评论视觉上更独立清晰

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