に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スパンを2回目にクリックした後に表示されることです。 私はそれを共通の問題として見てきましたが、まだ解決策を見つけることに失敗しました。どんな助けもありがとう。

Answer 1

他のclickイベントハンドラの中のclickイベントハンドラをbindにする必要はありません。単一のclickイベントハンドラを使用する必要があります。

show/hide機能は、第二clickイベントハンドラに属し、これは最初のclick後にspan DOM要素にbindedです。

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

あなたは以前、あなたのイベントハンドラを割り当てる：

window.onload=toggleDivFunction; 

とのonclick = 'toggleDivFunction（）'、当時とオールド・ファッションドの不必要なを削除します。

イベントがトリガーされたとき（toggleDivFunction）、リスナーを割り当てます。リスナー（arrowElement.onclick）をトリガーするには、をクリックして別のイベントを発生させる必要があります。

Answer 3

arrowElement.onclick = function() {}

なぜを削除しますか？あなたはまだない、両方

、onclickの機能のいずれか.USE DomarrowElement.onclickを実行するために、その後toggleDivFunction()を実行する最初の .soがarrowRightとonclick=toggleDivFunction()に関数を適用している