title: Using javascript to target class
body: <p>I have the following script in the head Element:</p>
  
  <pre><code>&lt;script&gt;
  function changeOpacity(className) {
  
  var elems = document.getElementsByClassName(className);
  var index = 0, length = elems.length;
  for ( ; index &lt; length; index++) {
      elems[index].style.transition = "opacity 0.3s linear 0s";
      elems[index].style.opacity = 0.8;
      }
  }
  &lt;/script&gt;
  
  &lt;style&gt;
  .red_box {width:100px;height:100px;opacity:1;background:red}
  &lt;/style&gt;
  </code></pre>
  
  <p>and the following structure in the body Element:</p>
  
  <pre><code>&lt;div onmouseover="changeOpacity('.red_box')"&gt;Click to fade red boxes&lt;/div&gt;
  
  &lt;div class="red_box"&gt;Box 1&lt;/div&gt;
  &lt;div class="red_box"&gt;Box 2&lt;/div&gt;
  &lt;div class="red_box"&gt;Box 3&lt;/div&gt;
  </code></pre>
  
  <p>I'm trying to achieve the following: when the user clicks on the 'Click to fade red boxes' message, the function should make each div with the class: 'red_box' to turn transparent.
  I would love some pointers (not Jquery please), Thanks!</p>