getElementsByClassName iterating through array
<p>I'm learning Javascript and I can't seem to figure out why the following code does not work.  It will change the background of the first paragraph, but not the second one.  When I check the console, it looks like the access variable is only returning one item to the array.  Any suggestions?  Thanks.</p>

<p>HTML</p>

<pre><code>&lt;p class="blue"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. &lt;/p&gt;
&lt;p class = "blue"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. &lt;/p&gt;
</code></pre>

<p>CSS:</p>

<pre><code>.blue{
background: blue;
}
.orange{
background:orange;
}
</code></pre>

<p>Javascript:</p>

<pre><code>var access = document.getElementsByClassName("blue");
for(var i = 0; i&lt;access.length; i++){
access[i].className = "orange";
}
</code></pre>