为什么必须两次单击此输入按钮才能调用函数? [英] Why do I have to click this input button twice to call a function?

问题描述

我有一个简单的输入按钮(不是提交)，带有onclick函数来显示或隐藏另一个div.由于某种原因，我必须单击两次按钮，一次选择它，然后第二次执行该功能.

I have a simple input button (not a submit) with an onclick function to show or hide another div. For some reason, I have to click the button twice, once to select it, then a second time to execute the function.

这是简短的版本:

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

The full code and button behavior is here: http://jsfiddle.net/yp5an1w7/3/

推荐答案

isdisplay第一次为空，因此您跳转到else条件.其他操作完成后，样式将设置为无.

The first time, isdisplayed is empty, so you jump to the else condition. After the else is done, the style is set to none.

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

The second call, sees the style as none, and updates it to block, then displays it.

如下所述，直接在id上添加display:none即可解决问题

As mentioned below, add the display:none directly on the id to solve the issue

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

这篇关于为什么必须两次单击此输入按钮才能调用函数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！