为什么我必须点击这个输入按钮两次来调用一个函数？

我有一个简单的输入按钮（不是提交）与onclick函数来显示或隐藏另一个div。出于某种原因，我必须点击按钮两次，一次选择它，然后再次执行该功能。为什么我必须点击这个输入按钮两次来调用一个函数？

这是短版：

<input type="button" id="request_info_layer_button" onclick="showForm()" value="REQUEST INFORMATION" /> 

function showForm() { 
var isdisplayed = document.getElementById("request_info_form_layer_wrapper").style.display; 
if (isdisplayed == "none") { 
    document.getElementById("request_info_form_layer_wrapper").style.display = "block"; 
    document.getElementById("request_info_layer_button").style.borderBottom = "0"; 
    document.getElementById("request_info_layer_button").style.borderLeft = "0"; 
    document.getElementById("request_info_layer_button").style.borderTop = "solid 3px #C4591B"; 
    document.getElementById("request_info_layer_button").style.borderRight = "solid 4px #C4591B"; 
} else { 
    document.getElementById("request_info_form_layer_wrapper").style.display = "none"; 
    document.getElementById("request_info_layer_button").style.borderTop = "0"; 
    document.getElementById("request_info_layer_button").style.borderRight = "0"; 
    document.getElementById("request_info_layer_button").style.borderLeft = "solid 3px #DFBC81"; 
    document.getElementById("request_info_layer_button").style.borderBottom = "solid 4px #DFBC81"; 
}

}

完整的代码和按钮的行为是在这里：http://jsfiddle.net/yp5an1w7/3/

来源

2015-07-19 Anonymous Man

你必须首先设置显示在输入标签的样式属性。只有这样它才能在第一次点击时工作。 – debatanu

Isdisplayed是第一次运行时的空白字符串。添加警报（isdisplayed），你会看到 – dman2306

在我的第一个评论样式显示：无应该被分配给div标签。我已经发布了同样的答案 – debatanu

第一次，isdisplayed是空的，所以你跳转到别的条件。完成其他操作后，样式设置为无。

第二个调用将样式视为无，并将其更新为阻止，然后显示它。

正如下面提到的，加上显示：无直接上的ID，以解决这一问题

<div id="request_info_form_layer_wrapper" style="display:none;">

来源

2015-07-19 02:24:21 Sparky

果然。它在CSS中设置为none，但是没有完成工作。 –

@AnonymousMan添加style =“display：none;”绝对没有改变？或者现在是否触发了一些错误/警告？如所示，我想这应该已经成功了 – lockedz

当您单击的第一次，onclick事件被触发，它转到其他部分，因为你的样式属性没有设置，因此显示会给你一个不等于'无'的空值。因此，它转到else部分并将display属性指定为“none”。所以

<div id="request_info_form_layer_wrapper" style="display:none"> 
<div id="request_info_form_wrapper"> 
    <form name="request_info" id="request_info_form" action="/somepage" method="post"> 
     <h3>Name</h3> 
     <input type="text" id="name_input" /><br /> 
     <p>Preferred method of contact</p> 
     <h3>Email</h3> 
     <input type="text" id="email_input" /><br /><br /> 
     <h3>Phone</h3> 
     <input type="text" id="phone_input" /><br /><br /> 
     <p>Thanks for your interest in our program. We'll only use your contact information to send additional materials to help you understand the program better.</p> 
     <input type="submit" id="submit_button" value="SUBMIT" /> 
    </form> 
</div>

把上面和你的函数应在第一次点击的工作。

来源

2015-07-19 02:25:43 debatanu

检查显示样式是否将失败。你可以通过改变你的css或者通过交换你的函数来检查它是否被显示=='block'而不是isdisplayed =='none'。

这里有一个很好的解释：Why does my button need to be clicked twice for the event handler to work the first time, but thereafter just once?

来源

2015-07-19 02:27:41 mongjong

有元素的风格属性和类属性之间的差异。含义yourElement.style是附加到元素的属性。这与css类定义的样式不一样。您可以样式属性添加到您的元素：

<div style="display:none;">...</div>

或访问底层的CSS类：

// pure JS 
document.styleSheets[0].cssRules[0] 
// but I would highly recommend to use jQuery: 
$("#element").css("style", "none"); 
// and check via 
var isDisplayed = $("#element").css("style");

来源

2015-07-19 02:30:22 user2084865

为什么我必须点击这个输入按钮两次来调用一个函数？

回答

相关问题