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 ，但我建议您切换类，而不是直接修改样式。