document.getElementById获取动态输入框值返回空字符串问题求助

核心问题 #

1. 动态变量导致元素匹配错误：你拼接代码字符串时用的是signupStudents变量，而非创建输入框时的固定数值。比如第一次点击后signupStudents变为2，拼接的代码是document.getElementById('signup-students-input' + signupStudents ).value，但当你第二次点击后signupStudents变成3，eval执行这段代码时会用当前的3，去查找signup-students-input3，而非之前创建的signup-students-input2，自然取不到正确的值。
2. 时机错误导致空值：点击按钮后立刻执行eval，此时新添加的输入框还没有任何输入内容，返回空字符串是正常的。
3. eval的不合理使用：存储代码字符串再用eval执行的方式既不安全，又容易引发变量作用域问题，完全没必要。

修正后的代码实现 #

直接存储所有学生输入框的ID，需要取值时遍历获取即可：

var newStudentBtn = document.getElementById("new-student");
var students = document.getElementById("students");
var signupStudents = 1;
var cost = document.getElementById("cost");

// 初始化存储学生输入框ID，包含第一个孩子的输入框
const studentInputIds = ["student-1-name"];

var newStudentBtnOnClick = function () {
    signupStudents++;
    const newStudent = document.createElement("input");
    newStudent.placeholder = "Type your child's first and last name here";
    newStudent.id = `signup-students-input${signupStudents}`;
    
    const newStudentHeading = document.createElement("h3");
    newStudentHeading.textContent = `Child (${signupStudents}) First and Last Name`;
    students.appendChild(newStudentHeading);
    students.appendChild(newStudent);
    
    cost.textContent = signupStudents * 39;
    // 将新输入框ID加入列表
    studentInputIds.push(newStudent.id);
};
newStudentBtn.addEventListener("click", newStudentBtnOnClick);

// 在表单提交时获取所有学生输入值
document.getElementById("send-btn").addEventListener("click", function(e) {
    e.preventDefault(); // 阻止表单默认跳转
    const allStudentNames = studentInputIds.map(id => document.getElementById(id).value);
    console.log("所有学生姓名：", allStudentNames);
    // 这里可以添加数据提交等后续逻辑
});

关键改进点 #

• 用数组存储输入框ID，避免依赖动态变量引发的匹配错误。
• 在表单提交时才获取输入值，确保用户已经完成输入。
• 完全抛弃eval，代码更安全、可读性更强。

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