本文针对HTML表单中JavaScript代码无法执行的问题，提供从基础到高级的解决方案，旨在帮助开发者正确显示表单提交成功消息。文章首先分析了DOM元素ID不匹配、事件监听方式不当以及忽略表单默认提交行为等常见问题根源，这些问题会导致JavaScript代码看似失效。随后，文章详细介绍了两种解决方案：一是修正ID并使用`event.preventDefault()`阻止表单默认提交行为，确保成功消息能够持续显示；二是推荐监听表单的`submit`事件，统一处理各种提交方式。此外，文章还探讨了如何利用jQuery简化DOM操作和事件绑定，提供更简洁的实现方式。通过本文的学习，开发者能够有效解决HTML表单中JS不执行的问题，提升用户交互体验。

本文旨在解决HTML表单中JavaScript代码不运行的常见问题，特别是如何正确显示提交成功消息。我们将深入探讨DOM元素ID匹配、事件监听机制，并通过纯JavaScript和jQuery两种方式，演示如何有效阻止表单默认提交行为，并在表单提交时触发自定义JavaScript逻辑，确保用户交互体验流畅。

理解问题根源：DOM元素ID与事件触发

在HTML表单中集成JavaScript功能时，代码不执行是一个常见的困扰。这通常源于几个核心问题：DOM元素ID的拼写错误、事件监听方式不当，以及对表单默认提交行为的忽视。

以显示“提交成功”消息为例，原始代码中存在一个典型的ID不匹配问题：JavaScript尝试通过document.getElementById('success-message')获取元素，但HTML中对应的消息容器的ID却是id="success"。这种细微的拼写差异会导致JavaScript无法找到目标元素，从而使代码看似“不运行”。

此外，将JavaScript函数直接绑定到提交按钮的onclick事件上，虽然可以触发函数，但如果表单的type="submit"按钮没有阻止默认行为，浏览器会立即提交表单并刷新页面。这意味着即使成功消息短暂显示，也会因为页面刷新而瞬间消失，给用户造成JavaScript未执行的错觉。

解决方案一：修正ID与基本事件处理

解决上述问题的第一步是确保JavaScript代码能够正确地定位到HTML元素。

1. 修正HTML元素ID

将成功消息的div元素的ID从id="success"修改为id="success-message"，使其与JavaScript代码中的document.getElementById()调用保持一致。

  Submission Successful! Your message has been sent.

2. 阻止表单默认提交行为

为了让成功消息能够持续显示，我们需要阻止表单的默认提交行为，即页面刷新。这可以通过在事件处理函数中使用event.preventDefault()方法实现。

修改后的Successmessageup函数和按钮绑定如下：

Submit

注意事项：

• 在onclick事件中，需要将event对象作为参数传递给函数。
• event.preventDefault()是关键，它会停止浏览器对该事件的默认处理。

解决方案二：推荐的表单提交事件处理

更推荐的做法是监听表单的submit事件，而不是按钮的onclick事件。这样可以确保无论用户是通过点击提交按钮、按回车键还是其他方式触发提交，JavaScript代码都能统一处理。

  
Contact Form
  

    
    

      Name
      
    
    

      Phone Number
      
    
    Submit
  
  

    Submission Successful! Your message has been sent.
  

代码解析：

• document.addEventListener('DOMContentLoaded', function() { ... });：确保在DOM完全加载和解析后才执行JavaScript代码，避免因元素未加载而导致的错误。
• form.addEventListener('submit', function(event) { ... });：为表单添加submit事件监听器。
• event.preventDefault();：在事件处理函数内部阻止表单的默认提交行为。
• successMessage.style.visibility = 'visible';：显示成功消息。

解决方案三：使用jQuery简化操作

如果项目中已经引入了jQuery库，可以使用它来简化DOM操作和事件绑定。jQuery提供了更简洁的语法来处理这些任务。

1. 引入jQuery库

在标签结束前引入jQuery库，通常通过CDN（内容分发网络）引入。

  
Contact Form
  

    
    Submit
  
  

    Submission Successful! Your message has been sent.
  

代码解析：

• $(document).ready(function() { ... });：等同于纯JavaScript中的DOMContentLoaded，确保DOM加载完成后执行代码。
• $('#send_message_form')：使用jQuery选择器选中ID为send_message_form的表单元素。
• .on('submit', function(e) { ... })：为表单绑定submit事件监听器。
• e.preventDefault();：阻止表单的默认提交行为。
• $('#success-message').css('visibility', 'visible');：使用jQuery的css()方法设置元素的样式。

最佳实践与注意事项

1. JavaScript放置位置： 建议将