Javascriptのクリックイベントはダブルクリックが必要

Question

divを切り替えるボタンにイベントリスナーを持つ単純なHTML-CSS-JavaScriptページがあります。

しかし、すべて機能していますが、アニメーション機能は最初に2回クリックするだけですが、ボタンが最初のクリックを聴いたことを証明するためにclickイベントを頼んだのです。

私はwindow.onloadでも同じことにラップしようとしました。

注：私は純粋なjavascriptのみを使用したいと思います。 （アニメーションが行われた）

この写真は、もう一度クリックを示しています： は、この写真は、最初のクリック（それはコンソールで "クリック" という）を示して

ありがとう

ここで

は私のコードです：

  var showDivButton = document.getElementById('showDivButton'); 
      var info = document.getElementById('info'); 

      showDivButton.addEventListener('click', animation) ; 

      // animation func 
      function animation() { 
       console.log('Clicked!'); 
       if (info.style.display === 'none'){ 
        info.style.display = 'inline-block'; 
        showDivButton.style.background = 'green'; 
       } else { 
        info.style.display = 'none'; 
        showDivButton.style.background = 'gray'; 
       } 

      } 

見てくださいMy Plunker Hereをご覧ください。前もって感謝します。

Answer 1

は、次のようにあなたの機能ブロックを修正してください：上のようinfo.style.displayは、あなたのdivのスタイル属性、ない計算されたスタイルを指しているので

function animation() { 
    console.log('Clicked!'); 
    if (info.style.display == '' || info.style.display == 'none'){ 
     info.style.display = 'inline-block'; 
     showDivButton.style.background = 'green'; 
    } else { 
     info.style.display = 'none'; 
     showDivButton.style.background = 'gray'; 
    } 

} 

info.style.displayは初期

Answer 2

に''です最初のクリック、これは設定されていません。

getComputedStyleを見たいかもしれませんが、スタイルを直接変更する代わりにクラスを切り替えることをお勧めします。