在按钮上单击 100 次后显示图像

Question

我是新来的，在编码方面仍有一些困难。 我正在尝试为一些朋友创建一个 html 页面，我设法创建了一个点击计数器，一个在一段时间后出现和消失的图像等

但是，我唯一无法做到的是如何在单击按钮 100 或 1000 次后显示图像。我可以在单击一次按钮后使图像出现，但我不知道如何使其仅在单击一次后才显示。

如果有人可以帮助我，我会很高兴！

$button = document.querySelector('button')
$span = document.querySelector('span')

function increment() {
  $span.innerHTML++;
}

$button.addEventListener('click', increment);

document.addEventListener("DOMContentLoaded", function() {
  setTimeout(function() {
    showImage();
    setInterval(hideImage, 8000);
  }, 5000);
});

function hideImage() {
  document.getElementById("imgHideShow").style.display = "none";
}

function showImage() {
  document.getElementById("imgHideShow").style.display = "block";
}

<img class="prayme" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Tram_icon_black_and_transparent_background.svg/1024px-Tram_icon_black_and_transparent_background.svg.png">

<p>You prayed <span id='count'>0</span> times</p>

<div id="image">
  <img src="https://pbs.twimg.com/profile_images/998926585691451392/WlkEVV7x_400x400.jpg">
</div>

<div class="text-center">
  <button><img class="imgbutton" src="https://www.nicepng.com/png/detail/980-9803933_emoji-emoji-pray-thankyou-thanks-praying-hands-emoji.png">
  Afficher l'image
  </button>
</div>

<div>
  <img src="https://i.stack.imgur.com/1dpmw.gif" class="browse-tip" id="imgHideShow">
</div>

Answer 1

你只需要添加一个if语句，检查innerHTML是否大于等于100，然后调用showImage()。

我删除了不相关的代码。

我通过在名称前添加let 来向变量添加声明。

我删除了按钮，而是直接在图像上放置了一个事件监听器。

我认为其余的代码是不言自明的。

let spanElement = document.querySelector('span');
let imgButton = document.getElementById('imgbutton');

function increment() {
  spanElement.innerHTML++;
  
  if (spanElement.innerHTML >= 5) {
    showImage();
  }
}

imgButton.addEventListener('click', increment);

document.addEventListener("DOMContentLoaded", function() {
  setInterval(hideImage, 8000);
});

function hideImage() {
  document.getElementById("imgHideShow").style.display = "none";
}

function showImage() {
  document.getElementById("imgHideShow").style.display = "block";
}

img {
  height: 3rem;
}

#imgHideShow.hidden {
  display: none;
}

<img class="prayme" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Tram_icon_black_and_transparent_background.svg/1024px-Tram_icon_black_and_transparent_background.svg.png">

<p>You prayed <span id='count'>0</span> times</p>

<div class="text-center">
  <img id="imgbutton" src="https://www.nicepng.com/png/detail/980-9803933_emoji-emoji-pray-thankyou-thanks-praying-hands-emoji.png">
  Afficher l'image
</div>

<div>
  <img src="https://i.stack.imgur.com/1dpmw.gif" class="hidden browse-tip" id="imgHideShow">
</div>

为了使代码更具可读性，我还会像这样添加以下内容：

1. 为用户需要点击的次数添加一个常量。
2. 为所有受影响的元素声明变量。
3. 使用类 (.hidden) 隐藏图像，并添加/删除该类，而不是添加样式。只有在无法切换类时才应添加样式。

const TARGET_TO_SHOW_IMAGE = 5;

let spanElement = document.querySelector('span');
let imgButton = document.getElementById('imgbutton');
let imgHideShow = document.getElementById("imgHideShow");
let numberOfTimesClicked = 0;

function increment() {
  numberOfTimesClicked++;
  
  if (numberOfTimesClicked >= TARGET_TO_SHOW_IMAGE) {
    showImage();
    numberOfTimesClicked = 0; // resets
  }

  spanElement.innerHTML = numberOfTimesClicked;
}

imgButton.addEventListener('click', increment);

document.addEventListener("DOMContentLoaded", function() {
  setInterval(hideImage, 8000);
});

function hideImage() {
  imgHideShow.classList.add('hidden');
}

function showImage() {
  imgHideShow.classList.remove('hidden');
}

img {
  height: 3rem;
}

#imgHideShow.hidden {
  display: none;
}

<img class="prayme" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Tram_icon_black_and_transparent_background.svg/1024px-Tram_icon_black_and_transparent_background.svg.png">

<p>You prayed <span id='count'>0</span> times</p>

<div class="text-center">
  <img id="imgbutton" src="https://www.nicepng.com/png/detail/980-9803933_emoji-emoji-pray-thankyou-thanks-praying-hands-emoji.png">
  Afficher l'image
</div>

<div>
  <img src="https://i.stack.imgur.com/1dpmw.gif" class="hidden browse-tip" id="imgHideShow">
</div>