Using javascript to target class
<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>