Question

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

单击主屏幕上的注册按钮后，它将调用registerScreen()函数，该函数将隐藏主屏幕元素，并显示带有文本框的表单组和保存已填写信息的提交按钮。但是，saveCustomer()函数会在我打开注册屏幕时立即调用自身。显然，它提交了一个空白表格。

我尝试了不同的事件侦听器方法，例如submit，click，getElementById().onclick等。我不想在HTML上调用saveCustomer()函数，因为我不知道如何通过这种方法传递信息。

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 ID = Math.floor((Math.random() * 999) + 100);

    randomID.innerHTML += ID;

    //This is the line I am having problems with
    document.getElementById("submitInfo").addEventListener("click", saveCustomer(ID, customerFirstName, customerLastName, customerPassword));
}

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

    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));
    }

    alert("Registration successful.");
}

Answer 1

尝试将saveCustomer包装在匿名回调函数中，如下所示：

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

Answer 2

问题是单击#submitInfo时，您没有注册要调用的函数，但是事件侦听器格式错误，并且您正在从声明中调用另一个函数。相反，您应该在单击#submitInfo时注册一个新的匿名函数，并且只能从该匿名函数中调用saveCustomer（）。

下面是您在案例中使用的 错误方式 。

<button id="btn">Click</button>
<script>
    document.getElementById("btn").addEventListener("click", alertSomething("test"));

    function alertSomething(text) {
        alert("Inside here, alerting "+text);
    }
</script>

初始化eventListener时，它正在调用alertSomething（）函数。文档加载后，这将立即触发alertSomething（）函数。

您想要的是定义一个新的匿名函数，该函数将在单击按钮后立即被调用，并且仅从该新函数内部调用alertSomething（）函数。之所以称为匿名函数，是因为它没有像普通函数一样的名称。

正确方法 来完成此任务：

<button id="btn">Click</button>
<script>
    document.getElementById("btn").addEventListener("click", function() {
        alertSomething("test")
    });

    function alertSomething(text) {
        alert("Inside here, alerting "+text);
    }
</script>

提交按钮调用功能，无需单击

2 个答案: