Javascript 为什么我必须单击此输入按钮两次才能调用函数？

我有一个简单的输入按钮（不是提交），带有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";
}

函数showForm（）{
var isdisplayed=document.getElementById（“请求信息表单层包装”）.style.display；
如果（显示=“无”）{
document.getElementById（“请求\信息\表单\层\包装器”）.style.display=“块”；
document.getElementById（“请求信息层按钮”）.style.borderBottom=“0”；
document.getElementById（“请求信息层按钮”）.style.borderLeft=“0”；
document.getElementById（“请求信息层按钮”）.style.borderTop=“solid 3px#C4591B”；
document.getElementById（“请求信息层按钮”）.style.borderRight=“solid 4px#C4591B”；
}否则{
document.getElementById（“请求信息表单层包装”）.style.display=“无”；
document.getElementById（“请求信息层按钮”）.style.borderTop=“0”；
document.getElementById（“请求信息层按钮”）.style.borderRight=“0”；
document.getElementById（“请求信息层按钮”）.style.borderLeft=“solid 3px#DFBC81”；
document.getElementById（“请求信息层按钮”）.style.borderBottom=“solid 4px#DFBC81”；
}

}

---

完整的代码和按钮行为如下：

第一次，isdisplayed为空，因此跳到else条件。完成else后，样式将设置为“无”

第二个调用将样式视为“无”，并将其更新为“块”，然后显示它

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

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

---

第一次，isdisplayed为空，因此跳转到else条件。完成else后，样式将设置为“无”

第二个调用将样式视为“无”，并将其更新为“块”，然后显示它

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

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

---

当您第一次单击时，会触发onclick事件并转到else部分，因为您的style属性未设置，因此display会为您提供不等于“none”的空值。因此，它转到else部分并将显示属性指定为“无”。所以

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

名称


首选接触方法

电子邮件



电话



感谢您对我们的节目感兴趣。我们将仅使用您的联系信息发送其他材料，以帮助您更好地了解该计划

---

放置上述内容，您的函数应在第一次单击时起作用。

当您第一次单击时，onclick事件将被触发，并转到else部分，因为您的样式属性未设置，因此display为您提供不等于“无”的空值。因此，它转到else部分并将显示属性指定为“无”。所以

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

名称


首选接触方法

电子邮件



电话



感谢您对我们的节目感兴趣。我们将仅使用您的联系信息发送其他材料，以帮助您更好地了解该计划

---

输入以上内容，您的功能应能在第一次单击时工作。

检查显示样式是否为“无”将失败。您可以通过更改css或交换函数来修复它，以检查isdisplayed=='block'而不是isdisplayed=='none'

---

这里有一个很好的解释：

检查显示样式是否为“无”将失败。您可以通过更改css或交换函数来修复它，以检查isdisplayed=='block'而不是isdisplayed=='none'

---

这里有一个很好的解释：

元素的style属性和class属性之间存在差异。 意思是yourElement.style是附加到元素的属性。这与css类定义的样式不同。可以向元素添加样式属性：

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

---

元素的style属性和class属性之间存在差异。 意思是yourElement.style是附加到元素的属性。这与css类定义的样式不同。可以向元素添加样式属性：

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

---

首先必须在输入标记的“样式”属性中设置显示。只有这样，它才能在第一次单击时工作。在第一次运行时，Isdisplayed是一个空白字符串。添加alert（isdisplayed），您将在我的第一条注释中看到样式显示：应该为div标记分配none。我已经发布了一个关于这个问题的答案，JS没有从文档的样式部分或外部css文件中“看到”应用于元素的样式。您的代码只“看到”作为元素属性的样式。基本上，它只能看到内联CSS。第一次通过时，代码将查找元素的.style.display属性。因为它没有任何内联样式，所以第二个块将运行，现在添加属性。第二次，元素具有内联样式，并且第一个块匹配。下面是一个使用JS的示例：首先必须在输入标记的style属性中设置显示。只有这样，它才能在第一次单击时工作。在第一次运行时，Isdisplayed是一个空白字符串。添加alert（isdisplayed），您将在我的第一条注释中看到样式显示：应该为div标记分配none。我已经发布了一个关于这个问题的答案，JS没有从文档的样式部分或外部css文件中“看到”应用于元素的样式。您的代码只“看到”作为元素属性的样式。基本上，它只能看到内联CSS。第一次通过时，代码将查找.style.display