Javascript onClick多次触发

我已经创建了一个带有JS验证的HTML表单。我已经通过onclick通过一个按钮调用了这个函数，但是它多次触发，导致不必要的空白表单数据。这是密码

我正在将数据推送到firebase实时数据库

我是JS的新手，任何帮助都将不胜感激

HTML

订阅

JS

函数updateSubscribeEmail（）{
//参考邮件收集
var messagesRef=firebase.database（）.ref（“订阅电子邮件”）；
var resetForm=document.getElementById（“订阅表单”）；
//收听表格提交
文件。getElementById（“订阅表单”）。添加的文件列表（“提交”，提交订阅表单）；
//提交表格
功能提交订阅表（e）{
//避免刷新整个页面
e、 预防默认值（）；
var email=getInputVal（“电子邮件”）；
//获取价值
var文本；
控制台日志（“验证前”）；
if（email.indexOf（“@”）==-1 | | email.length<6）{
控制台日志（“验证后”）；
text=“请输入有效的电子邮件地址！”；
红色\内部\ html.innerHTML=文本；
红色分区style.display=“块”；
setTimeout（函数（）{
红色分区style.display=“无”；
}, 5000);
}否则{
保存信息（电子邮件）；
控制台日志（“重置前”）；
resetForm.reset（）；
控制台日志（“重置后”）；
text=“您已成功订阅！”；
绿色\内部\ html.innerHTML=文本；
绿色分区style.display=“块”；
setTimeout（函数（）{
绿色分区style.display=“无”；
}, 5000);
}
}
//函数来获取表单值
函数getInputVal（id）{
return document.getElementById（id）.value；
}
//将消息保存到firebase
功能saveMessage（电子邮件）{
var newMessageRef=messagesRef.push（）；
newMessageRef.set({
电邮：电邮
});
}
}

主要是，布局感觉有点……奇怪。您有一个按钮，它同时具有“提交”和onclick回调类型。一般来说，我不会两者都加

本质上，你说的是“嘿，巴顿，当你被点击时，我希望你提交你在aaaannnddd中的表单，从“onclick”运行这个回调函数”。 您基本上是将onclick设置为一次执行多个功能，但不清楚您是否正在这样做

这里的一种方法是删除onclick或type。就个人而言，我不喜欢在按钮上使用type，但这是我内心的反应。我会使用onclick（如果需要，它还允许您在DOM中的任何位置移动按钮），然后您可以继续设置函数（或多个函数）仅基于onclick回调运行

---

为了简单起见，除非您需要，否则我不会嵌套函数。如果您是JS新手，这可能会很混乱。对我来说确实如此！我宁愿在另一个函数中调用函数，也不愿在另一个函数中定义它们。同样，这是我的首选，来自更具功能性的ES3背景。

您正在添加事件列表每次单击按钮时都会调用。JS事件监听器不会自动相互替换；它们会堆叠。每次单击按钮时，都会告诉它在下次提交表单时再次调用该监听器。只需添加一次事件监听器。您只需将该行代码移到

updateSubscribeEmail

fun之外即可连接到global scope.OMG！它按预期工作。正如您所说，我刚刚将事件侦听器移出了函数，还删除了嵌套函数（submitSubscribeForm）。非常感谢。我从昨天起就被困在这里了。

<form class="subscribe-form" id="subscribe-form">
 <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <input class="email-input" name="email" id="email" type="text" placeholder="Email">
 </div>

 <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
     <button onclick="updateSubscribeEmail();" class="sitebtn btn-submit" 
      type="submit">Subscribe</button></div>
</form>

function updateSubscribeEmail() {
    // Reference messages collection
    var messagesRef = firebase.database().ref("Subscription Emails");
    var resetForm = document.getElementById("subscribe-form");
    // Listen for form submit
    document.getElementById("subscribe-form").addEventListener("submit", submitSubscribeForm);
    // Submit form

    function submitSubscribeForm(e) {
        // To avoid entire page getting refreshed
        e.preventDefault();

        var email = getInputVal("email");
        // Get values
        var text;
        console.log("Before Validation");
        if (email.indexOf("@") === -1 || email.length < 6) {
            console.log("After Validation");
            text = "Please enter a valid email address!";
            red_inner_html.innerHTML = text;
            red_div.style.display = "block";
            setTimeout(function () {
                red_div.style.display = "none";
            }, 5000);
        } else {
            saveMessage(email);
            console.log("Before reset");
            resetForm.reset();
            console.log("after reset");
            text = "You have successfully subscribed!";
            green_inner_html.innerHTML = text;
            green_div.style.display = "block";
            setTimeout(function () {
                green_div.style.display = "none";
            }, 5000);
        }
    }

    // Function to get get form values
    function getInputVal(id) {
        return document.getElementById(id).value;
    }

    // Save message to firebase
    function saveMessage(email) {
        var newMessageRef = messagesRef.push();
        newMessageRef.set({
            Email: email
        });
    }
}