单击我的按钮时出现问题。单击事件仅适用于双击

Question

我在点击事件方面遇到一些问题。我是 JavaScript 新手。当我单击一次时，没有任何反应，但是双击我的事件正在运行。

我尝试从 stackoverflow 中找出类似的请求，但我还不明白，为什么点击事件会发生这种情况。

addEventListener('DOMContentLoaded', function() {
  const sadness = document.getElementById('btn-sadness');
  const happynes = document.getElementById('btn-happy');

  sadness.disabled = true;

  happynes.addEventListener('click', function() {
    const x = document.querySelector('.image');

    if (x.style.display === 'none') {
      x.style.display = 'block';
    } else {
      x.style.display = 'none';
    }
  });
});

.container {
  width: 400px;
  margin: 0 auto;
  text-align: center;
}

.image-container {
  display: inline-block;
}

img {
  display: none;
  width: 170px;
  margin-bottom: 10px;
}

button {
  display: block;
  margin: 0 auto;
}

<div class="container">
  <div class="image-container">
    <img class="image" src="test-img.JPG" alt="img">
    <button id="btn-happy">Happy</button>
    <button id="btn-sadness">Sadness</button>
  </div>
</div>

Answer 1

你的代码没问题，这是浏览器的行为。浏览器会检查是否存在隐藏图像的样式（例如

display: none

或

visibility: hidden

），并根据这些样式将（或不会）加载图像。在您的情况下，图像在页面加载时为

display: none

，这就是图像未加载的原因，并且

if(x.style.display === 'none')

返回

false

并将执行

else

块。该块与下载图像的图像进行交互，但它仍然不可见，因为 else 块设置了

display: none

。这就是为什么您需要双击才能使图像可见。要解决此问题，您只需检查图像是否可见，而不是检查图像是否不可见。

addEventListener('DOMContentLoaded', function(){
    const sadness = document.getElementById('btn-sadness');
    const happynes = document.getElementById('btn-happy');

    sadness.disabled = true;

    happynes.addEventListener('click', function(){ 
        const x = document.querySelector('.image');

        if(x.style.display === 'block'){
            x.style.display = 'none';
        } else {
            x.style.display = 'block';
        }
    });
});

.container{
    width: 400px;
    margin: 0 auto;
    text-align: center;
}

.image-container{
    display: inline-block;
}

img{
    display: none;
    width: 170px;
    margin-bottom: 10px;
}

button {
    display: block;
    margin: 0 auto;
}

<div class="container">
    <div class="image-container">
        <img class="image" src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="img">
        <button id="btn-happy">Happy</button>
        <button id="btn-sadness">Sadness</button>
    </div>
</div>