Javascript 提交按钮调用函数而不被单击
我正在尝试编写一个简单的银行应用程序来学习基本的DOM操作。这将是一个单页网站，有很多函数调用和隐藏/显示容器 单击主屏幕上的register按钮后，它将调用Javascript 提交按钮调用函数而不被单击,javascript,html,Javascript,Html,我正在尝试编写一个简单的银行应用程序来学习基本的DOM操作。这将是一个单页网站，有很多函数调用和隐藏/显示容器 单击主屏幕上的register按钮后，它将调用registerScreen（）函数，该函数随后隐藏主屏幕元素，并显示带有文本框的表单组和保存填写信息的submit按钮。然而，saveCustomer（）函数会在我打开注册屏幕时自动调用。显然，它提交了一份空白表格，这是一个问题 我尝试了不同的事件侦听器方法，如submit、click、getElementById（）.onclick，等
registerScreen（）saveCustomer（）submitclickgetElementById（）.onclicksaveCustomer（）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.");
}
尝试在匿名回调函数中包装saveCustomer，如下所示：
document.getElementById("submitInfo").addEventListener("click", () => {saveCustomer(ID, customerFirstName, customerLastName, customerPassword)});
尝试在匿名回调函数中包装saveCustomer，如下所示：
document.getElementById("submitInfo").addEventListener("click", () => {saveCustomer(ID, customerFirstName, customerLastName, customerPassword)});
问题在于，单击#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>
点击
document.getElementById（“btn”）.addEventListener（“单击”，警报内容（“测试”））；
函数（文本）{
警报（“此处内部，警报”+文本）；
}
<button id="btn">Click</button>
<script>
document.getElementById("btn").addEventListener("click", function() {
alertSomething("test")
});
function alertSomething(text) {
alert("Inside here, alerting "+text);
}
</script>
点击
document.getElementById（“btn”）.addEventListener（“单击”，函数）（）{
警告某事（“测试”）
});
函数（文本）{
警报（“此处内部，警报”+文本）；
}
<button id="btn">Click</button>
<script>
document.getElementById("btn").addEventListener("click", alertSomething("test"));
function alertSomething(text) {
alert("Inside here, alerting "+text);
}
</script>
点击
document.getElementById（“btn”）.addEventListener（“单击”，警报内容（“测试”））；
函数（文本）{
警报（“此处内部，警报”+文本）；
}
<button id="btn">Click</button>
<script>
document.getElementById("btn").addEventListener("click", function() {
alertSomething("test")
});
function alertSomething(text) {
alert("Inside here, alerting "+text);
}
</script>
点击
document.getElementById（“btn”）.addEventListener（“单击”，函数）（）{
警告某事（“测试”）
});
函数（文本）{
警报（“此处内部，警报”+文本）；
}