为什么在第一次运行所需的脚本之前，我的“提交”按钮需要点击两次

Why does my Submit button require 2 clicks before running desired script the first time?

本文关键字：按钮 提交 两次 我的 运行 第一次 脚本 为什么      更新时间：2023-09-26

我是java脚本的新手，并制作了这个脚本，以便在访问者提交电子邮件时弹出此自定义消息。然而，由于某些原因，"显示：阻止"只发生在用户第二次单击"提交"之后，而不是第一次单击之后。但是，此后每次（除非重新加载页面），该函数只需单击1次即可工作。我唯一能让它按需运行的方法是在body标签中添加onLoad="eSubmit"（基本上代替了第一次点击），但我不想这样做。我拥有的所有适用代码如下。。。如果有任何帮助，我将不胜感激。

<head>
<style type="text/css">
.alertbox{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,.6);
z-index:100;
display:none;
}
</style>
<script type="text/javascript">
function eSubmit() {
    var msgBox = document.getElementById("msgSend");
    var responseTxt = document.getElementById("thanks");
   if(msgBox.style.display == 'block' || msgBox.style.display ==''){
      msgBox.style.display = 'none';}
   else{
      msgBox.style.display = 'block';}
   if(responseTxt.innerHTML == 'Returning to page...'){
        responseTxt.innerHTML = 'Thank you for submitting your e-mail.';}
}
function txtChange(){
    var E = setTimeout("eSubmit()",1000);
    var responseTxt = document.getElementById("thanks");
    if(responseTxt.innerHTML == 'Thank you for submitting your e-mail.'){
        responseTxt.innerHTML = "Returning to page...";
        E;} 
}
</script>
</head>
<body>
<input type="button" value="Send" onclick="eSubmit()">
<div id="msgSend" class="alertbox">
    <div onClick="txtChange()">
        <p id="thanks">Thank you for submitting your e-mail.</P>
    </div>
</div>
</body>

只是猜测，但请查看此

   if(msgBox.style.display == 'block' || msgBox.style.display ==''){
      msgBox.style.display = 'none';}

display属性设置为空字符串，即使其中有显式设置。根据W3C的建议，.style属性只反映元素本身的style="-属性内设置的属性，而不是其他地方定义的任何计算或继承设置。

因此，if语句变为true，并在第一次单击时将display设置为none。

解决方案：更改if-else逻辑或将CSS显示属性初始化为符合您需求的样式属性

相关文章：