Question

我是java-script的新手，并且在访问者提交电子邮件时让此脚本弹出此自定义消息。但是，出于某种原因，'display：block'仅在用户第二次单击“Submit”之后而不是在第一次单击之后发生。但是，在此之后的每个后续时间（除非重新加载页面），该功能只需单击一次即可。我能够使其按预期运行的唯一方法是将onLoad =“eSubmit”添加到hte body标签（基本上取代第一次点击），但我不想这样做。我所有适用的代码如下......我将不胜感激，谢谢。

<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

猜猜，但看看这个

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

即使内部有明确的设置，display属性也会设置为空字符串。根据W3C的建议，.style-properties仅反映在style =“”内设置的属性 - 元素本身的属性，而不是其他地方定义的任何计算或继承设置。

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

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

为什么我的提交按钮在首次运行所需脚本之前需要2次点击？

1 个答案: