SMTP JS无报错但无法运行问题（原生JavaScript）

问题描述 #

网站注册页面的SMTP JS突然无法正常工作，使用Elastic Email作为邮件服务器，活动收件箱中无SMTP JS相关邮件数据。代码逻辑为根据signupStudents变量的值（初始为1，点击添加学生按钮后递增）执行不同的邮件发送逻辑，但无报错却无法发送邮件。

核心问题分析 #

• send函数初始化时机错误：页面加载时signupStudents=1，此时只会生成对应signupStudents===1的send函数。后续点击添加学生按钮修改signupStudents的值后，send函数不会重新生成，始终执行初始的单学生逻辑，即便添加多个学生也不会触发另一分支的代码。
• DOM元素直接拼接，未获取输入值：Body中直接拼接document.getElementById("parent-name")，这会把DOM元素对象转为字符串（结果类似[object HTMLInputElement]），而非输入框的实际内容，可能导致邮件发送请求不符合要求被服务器拒绝。
• Promise未处理失败场景：Email.send()返回Promise，但仅在then中执行页面跳转，未添加catch捕获错误，发送失败时也会跳转到成功页，无法得知具体错误信息。
• 前端暴露敏感信息（安全隐患）：Elastic Email的密码/API密钥直接写在前端代码中，不仅存在泄露风险，部分邮件服务商可能会拒绝来自前端的直接请求（出于安全策略）。
• 学生姓名拼接逻辑错误：使用eval拼接学生姓名的逻辑存在语法错误，且eval的使用容易引发安全问题和调试困难，可能导致隐式报错中断流程。

修复后的代码实现 #

JavaScript部分 #

var newStudentBtn = document.getElementById("new-student");
var students = document.getElementById("students");
var signupStudents = 1;
var cost = document.getElementById("cost");
var studentInputs = []; // 存储所有学生输入框的引用

// 初始化第一个学生输入框
studentInputs.push(document.querySelector(".student-names"));

var newStudentBtnOnClick = function () {
    signupStudents++;
    let newStudent = document.createElement("input");
    newStudent.placeholder = "Type your child's first and last name here";
    newStudent.required = true; // 添加必填验证
    newStudent.className = "student-names";
    
    let newStudentHeading = document.createElement("h3");
    newStudentHeading.innerHTML = "Child (" + signupStudents + ") First and Last Name";
    
    students.appendChild(newStudentHeading);
    students.appendChild(newStudent);
    students.appendChild(document.createElement("br")); // 添加换行
    
    // 更新费用
    cost.innerHTML = signupStudents * 39;
    // 存储新的学生输入框引用
    studentInputs.push(newStudent);
};

newStudentBtn.addEventListener("click", newStudentBtnOnClick);

// 统一的send函数，发送时动态判断signupStudents的值
var send = function() {
    // 获取家长姓名输入值
    var parentName = document.getElementById("parent-name").value.trim();
    if (!parentName) {
        alert("请填写家长姓名");
        return;
    }
    
    // 拼接学生姓名内容
    let studentNamesContent = "";
    studentInputs.forEach((input, index) => {
        const name = input.value.trim();
        if (name) {
            studentNamesContent += `<br>Child (${index+1}) Name: ${name}`;
        }
    });
    
    // 构建邮件内容
    var emailBody = `Parent Name: ${parentName}${studentNamesContent}`;
    
    // 发送邮件
    Email.send({
        Host: "smtp.elasticemail.com",
        Username: "ektechworld@gmail.com",
        Password: "你的Elastic Email有效密钥", // 建议后端处理，避免前端暴露
        To: "ektechworld@gmail.com",
        From: "ektechworld@gmail.com",
        Subject: "New Intermediate Signup", // 修正拼写错误
        Body: emailBody
    }).then(() => {
        // 发送成功后跳转
        window.location.replace("/success.html"); // 修正拼写错误：sucuss -> success
    }).catch(error => {
        // 捕获错误并提示
        console.error("邮件发送失败:", error);
        alert("邮件发送失败，请稍后重试或联系管理员");
    });
};

HTML部分（修正关键拼写与逻辑） #

<script src="https://smtpjs.com/v3/smtp.js"></script>
<div class="nav-bar">
    <nav>
        <a href="index.html"><img src="img_2.jpg" class="nav-img"></a>
        <div class="nav-options">
            <button class="nav-option">About Us</button>
            <button class="nav-option">Classes</button>
            <button class="nav-option">Contact Us</button>
        </div>
    </nav>
</div>
<div class="welcome">
    <h1>Signup for the Intermediate Class</h1> <!-- 修正拼写错误：Intermdite -> Intermediate -->
</div>
<div class="info-content">
    <div class="diveder"><h2>Please fill out the form</h2></div>
    <div class="info-content-blocks">
        <form onsubmit="send(); return false;"> <!-- 移除reset()，避免清空输入后无法重试 -->
            <div id="students">
                <h3>Parent First and Last Name</h3>
                <input placeholder="Type your first and last name here" required id="parent-name">
                <h3>Child (1) First and Last Name</h3>
                <input placeholder="Type your child's first and last name here" required class="student-names">
            </div>
            <br><br><button class="standard-button" id="new-student" type="button">New Student</button><br><br>
            <h3>Parent Email Address</h3>
            <input placeholder="Type your email address here" required>
            <h3>Parent Phone Number (For Emergency Contact Only)</h3> <!-- 修正拼写错误：Emgerency -> Emergency -->
            <input placeholder="Type your phone number here" required>
            <p>Please pay $<span id="cost">39</span> cash after your child's first class.</p> <!-- 添加所有格符号 -->
            <button class="standard-button" type="submit">Enroll</button>
        </form>
    </div>
</div>

额外建议 #

• 后端处理邮件发送：前端直接调用SMTP服务存在安全风险，建议搭建后端接口，由后端处理邮件发送逻辑，前端仅提交表单数据到后端。
• 验证Elastic Email密钥权限：确保使用的密钥具有SMTP发送权限，且账户余额/发送额度充足。
• 添加表单验证：在发送前对所有输入框的内容进行验证，避免空值或无效值导致发送失败。
• 避免使用eval：eval存在安全隐患且难以调试，改用数组存储输入框引用的方式处理多学生信息。

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