title: How can I add an onclick event to more than one class with the same class name?
body: <p>I'm trying to create a timetable site for myself to practice CSS grid and Javascript, I would like to be able to select the 'completed?' section of the timetable and change the div's colour to green. However, I'm having no luck.. so far my code is:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementsByClassName('tick').onclick = changeBgColor;
  function changeBgColor() {
    document.getElementsByClassName('tick').style.backgroundColor = "green";
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="item tick complete1"&gt;&lt;/div&gt;
  &lt;div class="item tick complete2"&gt;&lt;/div&gt;
  &lt;div class="item tick complete3"&gt;&lt;/div&gt;
  &lt;div class="item tick complete4"&gt;&lt;/div&gt;
  &lt;div class="item tick complete5"&gt;&lt;/div&gt;
  &lt;div class="item tick complete6"&gt;&lt;/div&gt;
  &lt;div class="item tick complete7"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Any help would be appreciated!</p>