JavaScript表单提交问题：点击按钮在Div中插入带表单值的段落

我来帮你搞定这个问题！你的代码里有几个小bug导致功能失效，咱们一步步修复：

问题分析 #

你的代码主要存在以下3个问题：

• 变量名不一致：创建的段落元素存在paragraph变量里，但后续错误地用了p.id = 'com'，导致p未定义的报错
• 提前操作不存在的DOM元素：你在把段落添加到页面之前，就尝试通过document.getElementById('com')获取它，这时候元素还没被渲染，自然获取不到
• 表单提交阻止不严谨：仅靠return false有时候会因上下文问题失效，更可靠的方式是直接阻止事件默认行为

修正后的完整代码 #

改进版（保留内联事件） #

<div class="chat-popup" id="myForm">
  <form name="commentForm" class="form-container">
    <label for="msg"><b>Comment</b></label>
    <textarea id="myComment" placeholder="Type comment.." name="msg" required></textarea>
    <!-- 修改：传递event参数，并返回函数执行结果 -->
    <button type="submit" class="lk-btn" onclick="return postComment(event)">Send</button>
    <button class="lk-btn" onclick="closeForm()">Close</button>
  </form>
</div>
<div id="commentBox" style="width: 400px; height: 400px; background-color: white; color: green; overflow-y: auto;"></div>

function postComment(event) {
  // 1. 强制阻止表单默认提交行为，避免页面刷新
  event.preventDefault();
  
  // 2. 获取输入框内容，先做非空校验
  const commentContent = document.getElementById('myComment').value.trim();
  if (!commentContent) return;
  
  // 3. 创建段落元素并赋值
  const paragraph = document.createElement("p");
  paragraph.id = 'com'; // 修正变量名错误，使用正确的paragraph变量
  // 用textContent替代innerHTML，避免XSS安全风险
  paragraph.textContent = commentContent;
  
  // 4. 将段落添加到评论容器
  const commentContainer = document.getElementById('commentBox');
  commentContainer.appendChild(paragraph);
  
  // 5. 清空输入框，提升用户体验
  document.getElementById('myComment').value = '';
  
  return false;
}

function closeForm() {
  document.getElementById('myForm').style.display = 'none';
}

更推荐的版本（移除内联事件，代码分离） #

现代前端开发更推荐将JS逻辑与HTML结构分离，避免内联事件：

<div class="chat-popup" id="myForm">
  <form name="commentForm" class="form-container">
    <label for="msg"><b>Comment</b></label>
    <textarea id="myComment" placeholder="Type comment.." name="msg" required></textarea>
    <button type="submit" class="lk-btn">Send</button>
    <button class="lk-btn" id="closeBtn">Close</button>
  </form>
</div>
<div id="commentBox" style="width: 400px; height: 400px; background-color: white; color: green; overflow-y: auto;"></div>

// 页面加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
  // 绑定表单提交事件
  const commentForm = document.querySelector('form[name="commentForm"]');
  commentForm.addEventListener('submit', function(event) {
    event.preventDefault();
    
    const commentContent = document.getElementById('myComment').value.trim();
    if (!commentContent) return;
    
    const paragraph = document.createElement("p");
    paragraph.textContent = commentContent;
    document.getElementById('commentBox').appendChild(paragraph);
    
    // 清空输入框
    document.getElementById('myComment').value = '';
  });
  
  // 绑定关闭按钮事件
  document.getElementById('closeBtn').addEventListener('click', function() {
    document.getElementById('myForm').style.display = 'none';
  });
});

关键修改点说明 #

1. 阻止默认行为：通过event.preventDefault()直接阻止表单提交的默认刷新行为，比return false更可靠
2. 变量名修正：确保操作的是创建好的paragraph元素，避免未定义错误
3. 安全内容赋值：使用textContent替代innerHTML，防止用户输入恶意脚本（XSS攻击）
4. 用户体验优化：添加输入框清空逻辑，评论容器添加滚动条避免内容溢出

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