Question

我正在尝试编写一个简单的银行应用程序来学习基本的DOM操作知识。这将是一个单页面的网站，其中包含许多函数调用和隐藏/显示容器。

单击主屏幕上的注册按钮后，它将调用registerScreen（）函数，该函数将隐藏主屏幕元素，并显示带有文本框的表单组和保存已填写信息的提交按钮。

但是，似乎我的某些变量是从空文本框中获取其值的（显然，声明它们时这些框是空的），并且在键入时它们的值不会更新。因此，如果我点击提交按钮，它将传递空值。

我添加了一个表单验证过程，并检查了本地存储以查看它是否真的传递了空白值。

function registerScreen() {
    document.getElementById("welcome-container").style.display = "none";
    document.getElementById("registerScreen").style.display = "block";

    let customerFirstName = document.getElementById('firstName').value;
    let customerLastName = document.getElementById('lastName').value;
    let customerPassword = document.getElementById('password').value;

    let randomID = document.getElementById("randomID");
    let customerId = Math.floor((Math.random() * 999) + 100);


    randomID.innerHTML += customerId;
    document.getElementById("submitInfo").addEventListener("click", () => {saveCustomer(customerId, customerFirstName, customerLastName, customerPassword)});

}

function saveCustomer (customerId, customerFirstName, customerLastName, customerPassword) {
    let customer = {
        id: customerId,
        firstname: customerFirstName,
        lastname: customerLastName,
        password: customerPassword,
        cashAmount: 0,
    }

    if (!validateForm(customerFirstName, customerLastName, customerPassword)) {
        return false;
    }

    if (localStorage.getItem("customers") === null) {
        let customers = [];
        customers.push(customer);
        localStorage.setItem("customers", JSON.stringify(customers));
    } else {
        let customers = JSON.parse(localStorage.getItem("customers"));
        customers.push(customer);
        localStorage.setItem("customers", JSON.stringify(customers));
    }

    document.getElementById('registerInfo').reset();
    e.preventDefault();

    alert("Registration successful.");
}

function validateForm(customerFirstName, customerLastName, customerPassword) {
    if (!customerFirstName || !customerLastName || !customerPassword) {
        alert('Please fill in the form');
        return false;
    }

    var regularExpression = /^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{6,16}$/;
    var regex = new RegExp(expression);

    if (!customerPassword.match(regex)) {
        alert('Please use a valid password');
        return false;
    }

    return true;
}

如何传递这些元素的更新版本？

Answer 1

如果要阻止事件的默认处理，则需要将其从addEventListener调用转移到saveCustomer函数。

由于您现在的代码是，您不会阻止表单的提交（我怀疑您的commitInfo输入元素的类型为“提交”）

一种解决方案是修改代码中的这两行：

    ....
    document.getElementById("submitInfo").addEventListener("click", () => {saveCustomer(customerId, customerFirstName, customerLastName, customerPassword)});
}

function saveCustomer (customerId, customerFirstName, customerLastName, 
     customerPassword) {

到

    ....
    document.getElementById("submitInfo").addEventListener("click", (e) => {saveCustomer(e,customerId, customerFirstName, customerLastName, customerPassword)});
    }

function saveCustomer (e,customerId, customerFirstName, customerLastName, customerPassword) {

第二，您在registerScreen方法中初始化变量，这意味着发送到saveCustomer（）的值将不会反映您在表单中所做的任何更改，您可以通过移动来解决此问题

 let customerFirstName = document.getElementById('firstName').value;
 let customerLastName = document.getElementById('lastName').value;
 let customerPassword = document.getElementById('password').value;

 let randomID = document.getElementById("randomID");
 let customerId = Math.floor((Math.random() * 999) + 100);

到saveCustomer（）函数的开头，然后您不再需要将它们作为变量传递给saveCustomer（）函数

值在提交时不会更新

1 个答案: