title: Show/Hide Image Button issues in JavaScript
body: <p>I'm trying to make show/hide type of button that toggles all the images on page on and off. I try to do it with <code>getElementsByClassName</code>. 
  First, I used this:</p>
  
  <pre><code>if (document.getElementsByClassName('showHide').style.visibility ='visible')
  {
   document.getElementsByClassName('showHide').style.visibility == 'hidden' 
  }
  </code></pre>
  
  <p>But I got <code>Uncaught TypeError: Cannot read property 'visibility' of undefined</code> error. So I changed the code to:</p>
  
  <pre><code>var elems = document.getElementsByClassName('showHide');
  for (var i=0; i&lt;elems.length; i++){
      if (elems[i].style.visibility == 'visible')
      {
          elems[i].style.visibility == 'hidden' 
      }
  }
  </code></pre>
  
  <p>And now I got nothing. No errors, but button doesn't work. I'm learning js just now, but I don't know where's the problem. Also, I really would like to try avoid jQuery or any other framework if possible.</p>
  
  <p>Whole code looks like that:</p>
  
  <pre><code>&lt;head&gt;
  &lt;title&gt;Button Test&lt;/title&gt;
  &lt;meta charset="utf-8"/&gt;
  &lt;link rel="stylesheet" href="css.css"/&gt;
  &lt;script type="text/javascript"&gt;
      function showImage()
      {
          var elems = document.getElementsByClassName('showHide');
          for (var i=0; i&lt;elems.length; i++)
              {
                  if (elems[i].style.visibility == 'visible')
                  {
                      elems[i].style.visibility == 'hidden' 
                  }
                  else (elems[i].style.visibility == 'hidden')
                  {
                      elems[i].style.visibility == 'visible'
                  }
              }
      }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="top"&gt;
      &lt;input type="button" value="Pokaż/Ukryj Grafikę" id="showHideButton" onclick="showImage();"/&gt;
  &lt;/div&gt;
  &lt;div id="main"&gt;
      &lt;div class="topSide showHide"&gt;
          &lt;img src="IMG/1.png"/&gt;
      &lt;/div&gt;
      &lt;div class="topSide showHide"&gt;
          &lt;img src="IMG/2.jpg"/&gt;
      &lt;/div&gt;
      &lt;div class="topSide showHide"&gt;
          &lt;img src="IMG/3.jpg"/&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>All and any help will be much appreciated.</p>