为什么我的“提交”按钮需要2次单击才能首次运行所需的脚本？

Question

I am new to java-script and have made this script to popup this custom message when a visitor submits an e-mail. 我是Java脚本的新手，并已创建此脚本来在访问者提交电子邮件时弹出此自定义消息。 However, for some reason the 'display:block' only happens after the second time the user clicks "Submit" and not after the first click. 但是，由于某些原因，“ display：block”仅在用户第二次单击“提交”之后发生，而不是在第一次单击之后发生。 However, each subsequent time after that (unless the page is reloaded) the function works with only 1 click. 但是，此后每次（除非重新加载页面），此功能仅需单击一下即可使用。 The only way I have been able to make it function as desired is by adding onLoad="eSubmit" to hte body tag (essentially taking the place of the first click), but I don't want to have to do that. 我能够使其按需运行的唯一方法是在正文标签中添加onLoad =“ eSubmit”（基本上代替了第一次单击），但我不想这样做。 All applicable code I have is below... I would appreciate any help, thanks. 我拥有的所有适用代码都在下面...感谢您的帮助。

<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>

Answer 1

Just guessing, but look into this 只是猜测，但请仔细研究

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

The display property is set to an empty string even if there's an explicit setting inside . 即使内部有显式设置，display属性也会设置为空字符串。 According to the W3C recommendation, .style-properties are only reflecting properties set inside the style=""-attribute of the element itself, not any computed or inherited settings defined elsewhere. 根据W3C的建议，.style-properties仅反映元素本身的style =“”-属性内设置的属性，而不反映在其他位置定义的任何计算或继承的设置。

Because of that the if-statement becomes true and sets display to none on the first click. 因此，if语句变为true，并在第一次单击时将显示设置为无。

Solution: change your if-else-logic or initialize the CSS display property as a style-attribute matching your needs 解决方案：更改if-else-logic或将CSS显示属性初始化为符合您需求的样式属性

为什么我的“提交”按钮需要2次单击才能首次运行所需的脚本？

问题描述

1 个解决方案

解决方案1
1 已采纳 2012-01-28 16:58:29

为什么我的“提交”按钮需要2次单击才能首次运行所需的脚本？

问题描述

1 个解决方案

解决方案1 1 已采纳 2012-01-28 16:58:29

解决方案1
1 已采纳 2012-01-28 16:58:29