title: Trying to make images hide and show when clicking. Page shows up as blank
body: <p>Trying to show and hide images when I click. Currently the page shows up as blank. However, when I reload the button shows up for a split second.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    var slideNum = 0
      var initial = document.getElementById('0');
      var imgOne = document.getElementById('1');
      var imgTwo = document.getElementById('2');
      var imgThree = document.getElementById('3');
      var imgFour = document.getElementById('4');
      var imgFive = document.getElementById('5');
      var end = document.getElementById('6');
      window.onload = displayImg();
      function displayImg() {
          if slideNum = 0 {
              initial.style.visibility = "visible";
              imgOne.style.visibility = "hidden";
              imgTwo.style.visibility = "hidden";
              imgThree.style.visibility = "hidden";
              imgFour.style.visibility = "hidden";
              imgFive.style.visibility = "hidden";
              end.style.visibility = "hidden";
              slideNum = slideNum + 1
          }
          if slideNum = 1 {
              initial.style.visibility = "hidden";
              imgOne.style.visibility = "visible";
              imgTwo.style.visibility = "hidden";
              imgThree.style.visibility = "hidden";
              imgFour.style.visibility = "hidden";
              imgFive.style.visibility = "hidden";
              end.style.visibility = "hidden";
              slideNum = slideNum + 1
          }
          if slideNum = 2 {
              initial.style.visibility = "hidden";
              imgOne.style.visibility = "hidden";
              imgTwo.style.visibility = "visible";
              imgThree.style.visibility = "hidden";
              imgFour.style.visibility = "hidden";
              imgFive.style.visibility = "hidden";
              end.style.visibility = "hidden";
              slideNum = slideNum + 1
          }
          if slideNum = 3 {
              initial.style.visibility = "hidden";
              imgOne.style.visibility = "hidden";
              imgTwo.style.visibility = "hidden";
              imgThree.style.visibility = "visible";
              imgFour.style.visibility = "hidden";
              imgFive.style.visibility = "hidden";
              end.style.visibility = "hidden";
              slideNum = slideNum + 1
          }
          if slideNum = 4 {
              initial.style.visibility = "hidden";
              imgOne.style.visibility = "hidden";
              imgTwo.style.visibility = "hidden";
              imgThree.style.visibility = "hidden";
              imgFour.style.visibility = "visible";
              imgFive.style.visibility = "hidden";
              end.style.visibility = "hidden";
              slideNum = slideNum + 1
          }
          if slideNum = 5 {
              initial.style.visibility = "hidden";
              imgOne.style.visibility = "hidden";
              imgTwo.style.visibility = "hidden";
              imgThree.style.visibility = "hidden";
              imgFour.style.visibility = "hidden";
              imgFive.style.visibility = "visible";
              end.style.visibility = "hidden";
              slideNum = slideNum + 1
          }
          if slideNum = 6 {
              initial.style.visibility = "hidden";
              imgOne.style.visibility = "hidden";
              imgTwo.style.visibility = "hidden";
              imgThree.style.visibility = "hidden";
              imgFour.style.visibility = "hidden";
              imgFive.style.visibility = "hidden";
              end.style.visibility = "visible";
              slideNum = 1
          }
      }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    .imgHidden {
          visibility: hidden;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img id="0" class="imgHidden" src="batPlain.png"&gt;
  &lt;img id="1" class="imgHidden" src="batSpiked.png"&gt;
  &lt;img id="2" class="imgHidden" src="bigButton.png"&gt;
  &lt;img id="3" class="imgHidden" src="stick.png"&gt;
  &lt;img id="4" class="imgHidden" src="woodPick.png"&gt;
  &lt;img id="5" class="imgHidden" src="spear.png"&gt;
  &lt;img id="6" class="imgHidden" src="batMetal.png"&gt;
  &lt;button onclick="displayImg()"&gt;Click Me!&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>How can I toggle the visibility of an image on click?</p>