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

Question

I'm new here and I still have some difficulties in coding. I'm trying to create an html page for some friends and I managed to create a click counter, an image which appear and disapear after some time etc

However the only thing that I can't manage to do is how I can make an image appear after clicking on the button for 100 or 1000 times. I can make the image appear after clicking on the button one time, but I don't know how to make it appear only after some clicking.

If someone can help me I'll be very glad!

 $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

You just need to add an if statement, checking if the innerHTML is more or equal to 100, and then call showImage() .

I removed code that wasn't relevant.

I added declarations to the variables by adding let in front the name.

I removed the button, and put an event listener directly on the image instead.

I think the rest of the code is self-explanatory.

 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>

To make the code even more readable, I would also add the following it it like this:

1. Add a constant for how many times the user need to click.
2. Declare variables for all the elements that are affected.
3. Use a class ( .hidden ) to hide the image, and add/remove that class, instead of adding a style. You should only add a style if you can't toggle classes.

 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>