title: How to switch between two different colors with one button using javascript
body: <p>Im trying to change between two colors when I click on the event listener using JavaScript. When I trigger the <code>click</code> event, it changes the color to black. When I click on it again, I want it to change back to the default, which is white. I think that an if statement is involved, but Im not sure how the logic would work in this case. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Light Switch&lt;/title&gt;
    &lt;link rel="stylesheet" href="light.css" /&gt;
  
  &lt;/head&gt;
  
  &lt;body id="body"&gt;
  
  &lt;button id="submit"&gt;Submit
    &lt;label id="switch"&gt;
      &lt;input type="checkbox" checked&gt;
      &lt;span class="slider"&gt;&lt;/span&gt;
    &lt;/label&gt;
  &lt;/button&gt;
  
  &lt;script src="light.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><br></p>
  
  <pre><code>function start() {
    var submit = document.getElementById("submit");
    submit.addEventListener("click", toggle);
  };
  
  function toggle() {
    var color = document.getElementById("body");
    color.style.backgroundColor = "black";
  };
  
  
  start();
  </code></pre>