爲什麼我必須點擊這個輸入按鈕兩次來調用一個函數？

我有一個簡單的輸入按鈕（不是提交）與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

爲什麼我必須點擊這個輸入按鈕兩次來調用一個函數？

回答

相關問題