title: Setting background colour of a column depending on time using JS
body: <p>I have five columns each with a different time, I want to highlight the column which is before the time in the next column. They are all in time order, from earliest to latest.</p>
  
  <p>To put this into context, column A has a time of 8AM, column B has a time or 12PM, column C has a time of 3PM, column D has a time of 6PM, and column E has a time of 9PM. So, if the current time was 2PM, column B should be highlighted until the time is 3PM, where column C becomes highlighted.</p>
  
  <p>Each column is defined using a class, and each time is retrieved from a JSON file.</p>
  
  <p>It's my understanding that I would have to use getElementsByClassName and iterate over the collection, as each result would yield a collection. However, this would target all the columns, rather than just a specific one.</p>
  
  <p>This is what I have so far in terms of my JavaScript code. Note, I am <strong>not</strong> using jQuery.</p>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>var h = addZero(currentDate.getHours());
  var m = addZero(currentDate.getMinutes());
  var s = addZero(currentDate.getSeconds());
  var time = h + timeSeparator + m + timeSeparator + s;
  
  if (time &gt;= timetables[i].sunrise || time &gt;= timetables[i].lunchtime) {
          var cols = document.getElementsByClassName('column');
              for (var i = 0; i &lt; cols.length; i++) {
                  cols[i].style.background = '#ba4346';
              }
          }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>       &lt;section id="times"&gt;
          &lt;div class="container cf"&gt;
              &lt;div class="column"&gt;
                  &lt;p id="sunrise"&gt;Sunrise&lt;/p&gt;
                  &lt;div class="separator"&gt;&lt;/div&gt;
                  &lt;p id="sunrise-time" class="time"&gt;undefined&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="column"&gt;
                  &lt;p id="lunchtime"&gt;Lunchtime&lt;/p&gt;
                  &lt;div class="separator"&gt;&lt;/div&gt;
                  &lt;p id="lunchtime-time" class="time"&gt;undefined&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  </code></pre>