为什么我的提交按钮需要2次点击才能第一次运行所需的脚本？

我是java-script的新手，并且让这个脚本在访问者提交电子邮件时弹出这个自定义消息。但是，出于某种原因，“显示：块”仅在用户第二次点击“提交”而不是第一次点击之后发生。但是，之后的每个时间（除非页面被重新加载），该功能只需要一次点击即可运行。我已经能够使其功能的唯一方法是通过添加onLoad =“eSubmit”来使用body标签（本质上取代了第一次点击），但我不想这样做。我所有适用的代码如下...我将不胜感激任何帮助，谢谢。为什么我的提交按钮需要2次点击才能第一次运行所需的脚本？

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

来源

2012-01-28 person0

只是猜测，但看这个

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

的显示属性设置为即使里面有一个明确的设定一个空字符串。根据W3C的建议，.style-properties只反映在元素本身的style =“” - 属性中设置的属性，而不是在别处定义的任何计算或继承设置。

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

解决方法：改变你的if-else逻辑或初始化CSS display属性的样式属性匹配您的需求

来源

2012-01-28 16:58:29 pong

好吧，显然你的想法是正确的。当我切换if/else逻辑时，它现在可以完美工作。但是，我不明白为什么？这是肘节新的代码：如果（msgBox.style.display == '无'）{ msgBox.style.display = '块';} 否则{ msgBox.style.display = 'none';} 由于某种原因，它以这种方式工作，但不是另一种方式？ – person0 2012-01-28 17:09:57

编辑我的帖子。你可以使用旧的解决方案发布提到的'alert'吗？这可能会清除一切。把提示放在if语句前面 – pong 2012-01-28 17:12:03

好吧，简单的一点是：你的CSS不包含显示的初始值。你的if语句检查一个空字符串（==''），发现它是因为它没有初始化，计算结果为true，并跳转到第一个块设置显示为无。因此，您的第一次点击将始终将显示设置为无。如果你接受答案，你可以点击大概勾选以及:) – pong 2012-01-28 17:43:18

为什么我的提交按钮需要2次点击才能第一次运行所需的脚本？

回答

相关问题