Javascript点击事件需要双击

Question

我有一个简单的HTML-CSS-JavaScript页面，在按钮上有一个事件监听器来切换div。

然而，一切正常，但动画功能第一次工作需要两次点击，虽然我安慰点击事件以证明该按钮也会听取第一次点击。

我试图将其包装到window.onload中但同样的事情。

注意：我只想使用纯JavaScript。 谢谢

这张照片显示第一次点击（它显示＆＃34;点击＆＃34;在控制台中）：

此图片显示第二次点击（动画发生）：

这是我的代码：

            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

尝试修改功能块，如下所示：

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的样式属性，而不是计算出的样式，所以在第一次点击时，这不会被设置。

您可能需要查看getComputedStyle，但我会建议切换类而不是直接修改样式。