Making a button that shows a hidden image on click

Issue

I’ve found tutorials that make an image hidden with some css, javascript and html but I’m having trouble making the image hidden first, and then having the button be able to make it visible and then hidden if pressed again.

edit: hopefully this code should help! Again, sorry I can’t figure some of this out, I don’t really know how this site works and I’m pretty new to coding,,,,

edit 2: I added where the function is being called. It’s suppose to be a multiple choice that shows an image when correct!

<style>
div.notdropdown {
    margin-top: 100px;
    margin-bottom: 100px;
    border: 1px solid black;
    background-color: rgb(181, 204, 180, 0.9);
}

.hide{
  display:none;
}
</style>
</body>

<script>
function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>



<div id="myDIV"> 
<img class= "hide" src="https://www.merriam-webster.com/assets/mw/static/art/dict/frig_bi.gif">
<br>
<a class= "hide" href="https://www.merriam-webster.com/dictionary/frigate%20bird">https://www.merriam-webster.com/dictionary/frigate%20bird </a>
<br>
</div>

<h1>What is a Frigate?</h1><br>
<form >
<input type="radio" name="choice" value="Bird"> A type of Bird
<input type="radio" name="choice" value="Mangrove"> A type of Mangrove tree
<input type="radio" name="choice" value="Sea Creature"> A type of Sea Creature
<input type="radio" name="choice" value="None"> None of These
</form>
<button onclick="submitAnswer();"> Submit Answer</button> 

</body>

<script>

function submitAnswer() {
  var radios = document.getElementsByName("choice");
  var i = 0, len = radios.length;
  var checked = false;
  var userAnswer;

  for( ; i < len; i++ ) {
     if(radios[i].checked) {
       checked = true;
       userAnswer = radios[i].value;
     }
  } 

  if(!checked) {
    alert("please select choice answer");
    return;
  }
  // Correct answer
  if(userAnswer === "Bird") {
     myFunction();
     alert("Answer is correct!");


  }
  // incorrect answer
  else {
     alert("Answer is wrong!");
  }

}



</script>
</body>
</html>

Solution

in fact it’s very simple, just use the toggle method, which allows you to easily enable and disable a class in an element

function toggleImage(){
  document.querySelector('#image').classList.toggle('hidden');
}

.hidden{
  display: none;
}

.w-100{
  width: 100%;
}

.mb-10{
  margin-bottom: 10px;
}

<button onClick="toggleImage()" class="w-100 mb-10">Show/Hide</button>

<img src="https://images.pexels.com/photos/462118/pexels-photo-462118.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" id="image" class="hidden w-100"/>

to work with a link to just change the tag to a and use href="#"

function toggleImage(){
  document.querySelector('#image').classList.toggle('hidden');
}

.hidden{
  display: none;
}

.w-100{
  width: 100%;
}

.mb-10{
  margin-bottom: 10px;
}

<a onClick="toggleImage()" class="w-100 mb-10" href="#">Show/Hide</a>

<img src="https://images.pexels.com/photos/462118/pexels-photo-462118.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" id="image" class="hidden w-100"/>

Answered By – Lucas

Answer Checked By – Terry (AngularFixing Volunteer)