title: Change elements style using javascript
body: <p>I'm working on some project of my own where I have the following problem:
  - I want to change the span's content font color to be red. </p>
  
  <p>Here is the HTML </p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Testing&lt;/title&gt;  
          &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
          &lt;script&gt;
             var arr = document.getElementsByClassName("change");
             console.log(arr);
             console.log(arr.length);
             var i;
  
              for (i = 0; i &lt;= arr.length; i++) {
              console.log(arr[i]);
              arr[i].style.color = red;
              }
          &lt;/script&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div&gt; 
             &lt;p id="test"&gt;Something &lt;span class="change"&gt;here&lt;/span&gt;&lt;/p&gt;
             &lt;p id="test"&gt;Something &lt;span class="change"&gt;there&lt;/span&gt;&lt;/p&gt;
             &lt;p id="test"&gt;Something &lt;span class="change"&gt;everywhere&lt;/span&gt;&lt;/p&gt;
  
          &lt;/div&gt;
       &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Based on what I think, this should work. However, it's strange. on the console.log(arr) I get input of HTML Collection [  ] in the browser's console, which seems to hold all the elements just fine.</p>
  
  <p>However, using arr.length gives me 0? I'm baffled as to where I'm making a mistake, and I'm sure it's something simple that I cannot put my finger on.</p>
  
  <p>Help is appreciated. Thanks in advance.</p>