title: Function not toggling how do I fix this problem?
body: <p>When the element's first clicked on its color should turn red. That part works. When the element's clicked on a second time it's should turn black, it's initial default color, and so on and so forth. That's the part that doesn't work. Once the element turns red it stays in that &quot;state&quot;.</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>function toggleClass() {
    var monday = document.getElementById("monday");
    monday.classList.add("redColor");
    monday.classList.remove("redColor");
    this.classList.toggle("redColor");
  }
  monday.addEventListener("click", toggleClass)</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.greenColor {
    color: green;
  }
  
  .redColor {
    color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" dir="ltr"&gt;
  
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Practise App&lt;/title&gt;
      &lt;link rel="stylesheet" href="index.css"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="monday" class=""&gt;Monday&lt;/div&gt;
      &lt;script src="index.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>