Onclick javascript 函數僅在第二次單擊時起作用

Question

 function toggleDivFunction() { var arrowElement = document.getElementById("arrowRight"); var showElement = document.getElementById("dropdownText"); arrowElement.onclick = function() { if (showElement.style.display == 'none') { showElement.style.display = 'block'; document.getElementById("arrowRight").style = "transform: rotate(+90deg)"; } else { showElement.style.display = 'none'; document.getElementById("arrowRight").style = "transform: rotate(0deg)"; } } }

 <p class="dropdownHeader">TOP <span id="arrowRight" class="arrowRight" onclick="toggleDivFunction();"> > </span></p> <div class="dropdownText" id="dropdownText"><p>TEXT TO BE SHOWN</p></div>

問題是dropdownText div 僅在第二次單擊arrowRight跨度后才會顯示。 我已將其視為常見問題，但仍然未能找到解決方案。 任何幫助，將不勝感激。

Answer 1

您不需要在另一個click事件處理程序中bind一個click事件處理程序。 您必須使用click事件處理程序。

show/hide功能屬於第二個click事件處理程序，並且在第一次click后binded到您的span DOM 元素。

 function toggleDivFunction () { var arrowElement = document.getElementById ("arrowRight"); var showElement = document.getElementById ("dropdownText"); if(showElement.style.display == 'none') { showElement.style.display = 'block'; document.getElementById("arrowRight").style = "transform: rotate(+90deg)"; } else { showElement.style.display = 'none'; document.getElementById("arrowRight").style = "transform: rotate(0deg)"; } }

 <p class="dropdownHeader">TOP <span id="arrowRight" class="arrowRight" onclick="toggleDivFunction();"> > </span></p> <div class="dropdownText" id="dropdownText"> <p>TEXT TO BE SHOWN</p></div>

Answer 2

只是添加到批准的答案。

檢查showElement.style.display == '' 。
此外，如果您使用display = 'none'作為默認值，則在第一次單擊時切換到 flex。

例子：

..
if (showElement.style.display == 'none' || showElement.style.display == '') {
..

如果文本樣式為display = 'none' 。

Answer 3

您想更早地分配事件處理程序：

window.onload=toggleDivFunction;

並刪除onclick='toggleDivFunction()' ，它當時是不必要的並且是老式的。

您的代碼在觸發事件時分配一個偵聽器（toggleDivFunction）。 要觸發偵聽器 (arrowElement.onclick)，您需要引發另一個事件進行第二次 click 。

Answer 4

刪除arrowElement.onclick = function() {}

為什么？

您已經在onclick=toggleDivFunction()帶有arrowRight的函數。 arrowRight首先執行toggleDivFunction()然后執行Dom arrowElement.onclick使用任何一個 onclick 函數，而不是兩者

 function toggleDivFunction() { var arrowElement = document.getElementById("arrowRight"); var showElement = document.getElementById("dropdownText"); if (showElement.style.display == 'none') { showElement.style.display = 'block'; document.getElementById("arrowRight").style = "transform: rotate(+90deg)"; } else { showElement.style.display = 'none'; document.getElementById("arrowRight").style = "transform: rotate(0deg)"; } }

 <p class="dropdownHeader">TOP <span id="arrowRight" class="arrowRight" onclick="toggleDivFunction();"> > </span></p> <div class="dropdownText" id="dropdownText"> <p>TEXT TO BE SHOWN</p> </div>