带有嵌套addEventListener的回调函数，提供空值

Question

我正在为一个我要去的学院制作一个所谓的家庭项目，并且遇到了将eventListener添加到使用javaScript创建的html按钮的问题。问题是，当您按下按钮（应该从输入字段返回值）时，它将返回空值。发现实际上，一旦使用了主要的eventListener，就会触发并“点击”该事件监听器。

在代码部分，我进行了2次尝试，其中1次使用回调，而1次嵌套。

如何正确获取这些输入字段的值？

感谢所有帮助！

尝试使用回调函数，但仍获取空值。尝试从第一个事件侦听器中获取第二个事件侦听器，但由于没有创建button元素，因此当然会收到错误消息，因此它无法将eventListener添加到null元素，并尝试仅嵌套到事件侦听器，但仍为空值

    document.getElementById("zListDiv").addEventListener("click", (e) => {
        if (e.target.name === "delete") {
            delUser(Number(e.target.id));
        } else if (e.target.name === "edit") {
            editUser(Number(e.target.id), changeUser)
        } else if (e.target.name === "view") {
            console.log("This button transfers to Florent's View user page!");
        }
    }
    )

    function editUser(reqId, callback) {
        let pos = zResultUser.map(function (e) { return e.id; }).indexOf(reqId);
        let user = zResultUser[pos];
        document.getElementById("editDiv").innerHTML =
            `<div>
                    <fieldset id="myFieldsetUser">
                        <legend>Register New User:</legend>
                        First Name <br>
                        <input type="text" id="firstName" value="${user.firstName}" required><br>
                        Last Name: <br>
                        <input type="text" id="lastName" value="${user.lastName}" required><br>
                        Username:<br>
                        <input type="text" id="userName" value="${user.userName}" required><br>
                        Password:<br>
                        <input type="text" id="password" value="${user.password}"><br>
                        Role:<br>
                        <input type="text" id="role" value="${user.role}"> <br>
                        Email:<br>
                        <input type="email" id="email" value="${user.email}"> <br>
                        <br>
                        <input type="radio" id="statusActive" name="status" value="active" checked>
                        <label for="statusActive">Active</label>
                        <br>
                        <input type="radio" id="statusDisable" name="status" value="suspended">
                        <label for="statusDisable">Suspended</label>
                        <br>
                        <button id="editUser" name="update">Save</button>
                    </fieldset>
                </div>`
    callback(user, pos);
    }
    function changeUser(user, pos) {
        document.getElementById("editUser").addEventListener("click", () => {
            let updatedUser = ({
                "id": user.id,
                "firstName": document.getElementById("firstName").value,
                "lastName": document.getElementById("lastName").value,
                "userName": document.getElementById("userName").value,
                "password": document.getElementById("password").value,
                "role": document.getElementById("role").value,
                "email": document.getElementById("email").value,
                "image": user.image,
                "language": user.language,
                "status": document.getElementsByName("status").value,
                "assigned_issues": user.assigned_issues,
                "watched_Issues": user.watched_Issues
            })
            zResultUser.splice(pos, 1, updatedUser);
        })
    }

    document.getElementById("zListDiv").addEventListener("click", (e) => {
        if (e.target.name === "delete") {
            delUser(Number(e.target.id));
        } else if (e.target.name === "edit") {
            editUser(Number(e.target.id))
        } else if (e.target.name === "view") {
            console.log("This button transfers to Florent's View user page!");
        }
    }
    )

    function editUser(reqId) {
        let pos = zResultUser.map(function (e) { return e.id; }).indexOf(reqId);
        let user = zResultUser[pos];
        document.getElementById("editDiv").innerHTML =
            `<div>
                    <fieldset id="myFieldsetUser">
                        <legend>Register New User:</legend>
                        First Name <br>
                        <input type="text" id="firstName" value="${user.firstName}" required><br>
                        Last Name: <br>
                        <input type="text" id="lastName" value="${user.lastName}" required><br>
                        Username:<br>
                        <input type="text" id="userName" value="${user.userName}" required><br>
                        Password:<br>
                        <input type="text" id="password" value="${user.password}"><br>
                        Role:<br>
                        <input type="text" id="role" value="${user.role}"> <br>
                        Email:<br>
                        <input type="email" id="email" value="${user.email}"> <br>
                        <br>
                        <input type="radio" id="statusActive" name="status" value="active" checked>
                        <label for="statusActive">Active</label>
                        <br>
                        <input type="radio" id="statusDisable" name="status" value="suspended">
                        <label for="statusDisable">Suspended</label>
                        <br>
                        <button id="editUser" name="update">Save</button>
                    </fieldset>
                </div>`
        document.getElementById("editUser").addEventListener("click", () => {
            let updatedUser = ({
                "id": user.id,
                "firstName": document.getElementById("firstName").value,
                "lastName": document.getElementById("lastName").value,
                "userName": document.getElementById("userName").value,
                "password": document.getElementById("password").value,
                "role": document.getElementById("role").value,
                "email": document.getElementById("email").value,
                "image": user.image,
                "language": user.language,
                "status": document.getElementsByName("status").value,
                "assigned_issues": user.assigned_issues,
                "watched_Issues": user.watched_Issues
            })
            zResultUser.splice(pos, 1, updatedUser);
        })
    }