解决EmailJS提交失败：理解JavaScript脚本加载顺序与DOM交互

霞舞

发布时间：2025-12-12 23:10:35

573人浏览过

来源于php中文网

原创

解决EmailJS提交失败：理解JavaScript脚本加载顺序与DOM交互

本教程旨在解决emailjs邮件提交功能不工作的问题，深入探讨javascript脚本加载顺序对dom元素访问的影响。我们将详细解释为何在html头部同步加载脚本可能导致`document.queryselector()`返回`null`，并提供使用`defer`或`async`属性作为现代且有效的解决方案，确保脚本在dom准备就绪后正确执行，从而实现emailjs的顺利集成与邮件发送。

1. 问题诊断：为何EmailJS提交失败？

在使用EmailJS集成表单提交功能时，开发者可能会遇到点击提交按钮后邮件未发送，且浏览器控制台出现错误的情况。常见的错误信息包括“Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')”或类似提示，这通常表明JavaScript代码尝试访问一个尚未存在于DOM中的元素。

根本原因在于JavaScript文件的加载和执行时机。当

以下是导致问题的典型HTML脚本加载方式：

在这个例子中，Index.js文件被同步加载。如果该文件中的代码（例如document.querySelector('#myForm').addEventListener(...)）在myForm元素被解析之前执行，就会导致错误。

立即学习“Java免费学习笔记（深入）”；

2. 解决方案：defer与async属性详解

为了解决JavaScript脚本过早执行导致DOM元素不可用的问题，HTML5引入了defer和async这两个布尔属性，用于控制脚本的加载和执行行为。

2.1 defer属性

加载方式： 带有defer属性的脚本会在HTML解析的同时进行下载（并行下载）。
执行时机： 脚本的执行会被推迟到整个HTML文档解析完毕之后，但在DOMContentLoaded事件触发之前。
执行顺序： 带有defer属性的脚本会按照它们在文档中出现的顺序依次执行。
适用场景： defer非常适合那些依赖于完整DOM结构或需要按特定顺序执行的脚本。例如，本教程中的表单处理脚本就非常适合使用defer，因为它需要确保表单元素已经存在。

2.2 async属性

加载方式： 带有async属性的脚本也会在HTML解析的同时进行下载（并行下载）。
执行时机： 脚本下载完成后会立即执行，不会等待HTML解析完成，也不会等待其他脚本。
执行顺序： async脚本的执行顺序不确定，哪个脚本先下载完成就先执行哪个。
适用场景： async适合那些独立于DOM结构且不依赖于其他脚本的脚本，例如网站分析工具或广告脚本。

2.3 选择建议

对于本例中需要访问表单元素（#myForm）并添加事件监听器的Index.js，defer是更稳健且推荐的选择。它确保了脚本在DOM完全解析后才执行，从而避免了querySelector返回null的问题，同时保持了脚本的相对执行顺序。

3. 实施修正：更新HTML脚本标签

根据上述分析，我们只需对Index.js的

ClipDrop

Stability.AI出品的图片处理系列工具（背景移除、图片放大、打光）

下载

以下是修正后的HTML代码：


    
    
    
    Squash Academy
    
    
    

    
     

    
    
    


    
    
        
            
                PNBHS
                Squash Academy

通过添加defer属性，Index.js将在HTML解析完成后才执行，此时id="myForm"的表单元素已经存在于DOM中，document.querySelector('#myForm')将能正确获取到该元素，从而允许事件监听器被成功绑定。

4. 确保EmailJS配置正确

除了脚本加载顺序，确保EmailJS本身的配置正确无误也是成功发送邮件的关键。

您的JavaScript代码中EmailJS的发送逻辑是正确的，它监听了表单的提交事件，阻止默认行为，收集表单数据，然后调用emailjs.send()方法。

// Javascript/Index.js
document.querySelector('#myForm').addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单的默认提交行为

  const firstNameEl = document.querySelector('#first-name');
  const lastNameEl = document.querySelector('#last-name');
  const emailEl = document.querySelector('#email');
  const contactNumberEl = document.querySelector('#contact-number');
  const messageEl = document.querySelector('#message');

  // 确保所有元素都已找到，虽然defer已经保证了这一点
  if (firstNameEl && lastNameEl && emailEl && contactNumberEl && messageEl) {
    // 解构表单值
    const {value: firstName } = firstNameEl;
    const {value: lastName } = lastNameEl;
    const {value: email } = emailEl;
    const {value: contactNumber } = contactNumberEl;
    const {value: message } = messageEl;

    // EmailJS 模板参数，键名需与EmailJS模板中的变量名一致
    const templateParams = { firstName, lastName, email, contactNumber, message };

    // 发送邮件
    // 'service_b73vwu6' 是您的服务ID
    // 'template_f65ay7i' 是您的模板ID
    emailjs.send('service_b73vwu6', 'template_f65ay7i', templateParams)
      .then(response => console.log('SUCCESS!', response.status, response.text))
      .catch(error => console.error('FAILED...', error));
  } else {
      console.error("表单元素未完全加载或ID不匹配。");
  }
});

关键检查点：

用户ID (emailjs.init("lw-rGAeNYwJp6Ox5R"))： 确保这个ID与您在EmailJS控制台中获取到的Public Key完全匹配。
服务ID (service_b73vwu6)： 确保这个ID与您在EmailJS控制台中创建的Email Service ID完全匹配。
模板ID (template_f65ay7i)： 确保这个ID与您在EmailJS控制台中创建的Email Template ID完全匹配。
模板变量： 确保templateParams对象中的键（如firstName, lastName, email等）与您在EmailJS邮件模板中定义的变量名（例如{{firstName}}）完全一致。

5. 注意事项与调试技巧

浏览器开发者工具：
- 控制台 (Console)： 始终检查是否有任何JavaScript错误信息。Uncaught TypeError是最常见的指示脚本未能找到DOM元素的错误。
- 网络 (Network)： 提交表单后，检查是否有对EmailJS API的POST请求（通常是api.emailjs.com）。如果请求成功（状态码200），则问题可能出在EmailJS的配置（如模板变量不匹配、服务未启用等）。如果请求未发出，则问题可能出在JavaScript事件监听或执行上。
EmailJS控制台： 登录您的EmailJS账户，检查“Email Services”和“Email Templates”是否配置正确且处于活动状态。查看“Email Logs”以了解是否有邮件发送尝试的记录，以及失败的原因。
ID匹配： 仔细核对JavaScript代码中document.querySelector()使用的ID（如#myForm, #first-name）是否与HTML中对应元素的id属性完全一致，包括大小写。
其他脚本冲突： 检查页面中是否存在其他可能干扰DOM操作或事件监听的JavaScript代码。

总结

正确处理JavaScript脚本的加载顺序是前端开发中的一个基础但至关重要的方面。通过将依赖DOM的脚本（如表单处理逻辑）的

如何在javascript中操作DOM元素_从选取到事件处理的完整指南【教程】

javascript如何选取HTML元素？【教程】

标题：用图像替换单词中的单个字母并精准垂直居中

如何在移动浏览器中可靠设置视频录制的宽高比

如何优雅地显示“请启用 JavaScript”提示而不闪烁

相关专题

js获取数组长度的方法

在js中，可以利用array对象的length属性来获取数组长度，该属性可设置或返回数组中元素的数目，只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值，也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容，供大家免费下载使用。

556

2023.06.20

js刷新当前页面

js刷新当前页面的方法：1、reload方法，该方法强迫浏览器刷新当前页面，语法为“location.reload([bForceGet]) ”；2、replace方法，该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，不能通过“前进”和“后退”来访问已经被替换的URL，语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

374

2023.07.04

js四舍五入

js四舍五入的方法：1、tofixed方法，可把 Number 四舍五入为指定小数位数的数字；2、round() 方法，可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

732

2023.07.04

js删除节点的方法

js删除节点的方法有：1、removeChild()方法，用于从父节点中移除指定的子节点，它需要两个参数，第一个参数是要删除的子节点，第二个参数是父节点；2、parentNode.removeChild()方法，可以直接通过父节点调用来删除子节点；3、remove()方法，可以直接删除节点，而无需指定父节点；4、innerHTML属性，用于删除节点的内容。

477

2023.09.01

JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号，可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容，供大家免费下载体验。

414

2023.09.04

js生成随机数的方法

js生成随机数的方法有：1、使用random函数生成0-1之间的随机数；2、使用random函数和特定范围来生成随机整数；3、使用random函数和round函数生成0-99之间的随机整数；4、使用random函数和其他函数生成更复杂的随机数；5、使用random函数和其他函数生成范围内的随机小数；6、使用random函数和其他函数生成范围内的随机整数或小数。

991

2023.09.04

如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍：1、内联脚本是将JavaScript代码直接嵌入到HTML标签中；2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中；3、外部脚本是将JavaScript代码放置在一个独立的文件；4、外部脚本是将JavaScript代码放置在一个独立的文件。

658

2023.09.12

Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型，用于表示独一无二的值。Symbol的特点：1、独一无二，每个Symbol值都是唯一的，不会与其他任何值相等；2、不可变性，Symbol值一旦创建，就不能修改或者重新赋值；3、隐藏性，Symbol值不会被隐式转换为其他类型；4、无法枚举，Symbol值作为对象的属性名时，默认是不可枚举的。

553

2023.09.20

PHP WebSocket 实时通信开发

本专题系统讲解 PHP 在实时通信与长连接场景中的应用实践，涵盖 WebSocket 协议原理、服务端连接管理、消息推送机制、心跳检测、断线重连以及与前端的实时交互实现。通过聊天系统、实时通知等案例，帮助开发者掌握使用 PHP 构建实时通信与推送服务的完整开发流程，适用于即时消息与高互动性应用场景。

2026.01.19

热门下载

网站特效

网站源码

网站素材

前端模板