Javascript點擊事件需要雙擊

Question

我有一個簡單的HTML-CSS-JavaScript頁面，在按鈕上可以通過事件監聽器切換div。

但是，所有功能都可以正常運行，但是動畫功能第一次需要兩次單擊才能工作，盡管我已控制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';
                }

            }

請在這里查看我的柱塞 。 先感謝您。

Answer 1

嘗試如下修改功能塊：

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

因為info.style.display是指div的style 屬性 ，而不是計算的Style，所以在第一次單擊時未設置。

您可能想看看getComputedStyle ，但我建議您切換類，而不是直接修改樣式。