title: Make a switch to add/remove a class to all elements that have a specific class
body: <p>I've been trying to make a switch so when clicked it adds a class to every element that has the class "ChangeColors" but has been unable to do so.
  It returns with</p>
  
  <blockquote>
    <p>TypeError: Cannot read property 'add' of undefined</p>
  </blockquote>
  
  <p>CSS</p>
  
  <pre><code>.ChangeColors {
      background-color: #ff801b;
      color:black;
  }
  
  .bluecolor {
   background-color: blue;
   color:white;
   }
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>function ChangeColors() {
      var single = document.querySelector('.ChangeColors');
      var all = document.querySelectorAll('.ChangeColors');
      if (single.classList.contains('bluecolor')) {
        all.classList.remove('bluecolor');
        console.log("remove");
      } else {
        all.classList.add('bluecolor');
        console.log("add");
      }
  }
  </code></pre>