无jQuery表单事件监听：结果仅显控制台网页不展示求助

看起来你遇到的核心问题大概率是表单默认提交行为导致页面刷新——你用console.log能看到内容，说明字段值的获取逻辑是正常的，但页面一刷新，刚插入到demoJS里的内容就被瞬间清空了，所以肉眼看不到效果。咱们一步步来解决：

最可能的修复方案：阻止表单默认提交 #

表单默认的submit事件会触发页面刷新，这是导致内容“消失”的罪魁祸首。只需要在事件处理函数中阻止这个默认行为即可，同时还要确保DOM加载完成后再绑定事件，避免找不到元素的问题。

修改后的完整代码示例 #

<!-- HTML部分 -->
<form id="studentForm">
  <input type="text" id="nom" placeholder="Nom">
  <input type="text" id="prenom" placeholder="Prénom">
  <input type="text" id="num_etu" placeholder="Numéro étudiant">
  <button type="submit">Afficher étudiant</button>
</form>
<p id="demoJS"></p>

// JS部分
document.addEventListener('DOMContentLoaded', function() {
  // 获取表单元素
  const studentForm = document.getElementById('studentForm');
  
  // 绑定表单提交事件
  studentForm.addEventListener('submit', function(event) {
    // 关键：阻止表单默认提交行为，避免页面刷新
    event.preventDefault();
    
    // 获取各个字段的值
    const nom = document.getElementById("nom").value;
    const prenom = document.getElementById("prenom").value;
    const numEtu = document.getElementById("num_etu").value;
    
    // 获取目标段落并插入内容
    const demoElement = document.getElementById("demoJS");
    // 用模板字符串让HTML拼接更清晰
    demoElement.innerHTML += `${nom}<br>${prenom}<br>${numEtu}<br><br>`;
    
    // 可选：提交后清空表单
    studentForm.reset();
  });
});

其他需要排查的点 #

如果上述方案没用，再检查这几个地方：

• 确认demoJS元素在HTML中确实存在，没有拼写错误（比如写成demojs或者DemoJS）
• 检查是否有其他JS代码修改了demoJS的内容，覆盖了你插入的信息
• 如果是用按钮点击触发函数而非表单提交，要确保按钮的type是button（默认是submit，还是会触发表单提交）

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