title: Why does the JavaScript Dropdown button not work?
body: <p>Hello I used the addEventListener to my html dropdown form in JavaScript but it is not working. I'm supposed to use the dropdown to select between 3 colors --Blue, Violet, and Pink-- to change the color of the header. The expected result is the header color changing based off what I select in the dropdown option. For instance if I select Blue it should change the header color to blue. The same goes for the other color options.</p>
  <p>The actual result is the header color remaining constant no matter which color I select, how many times I click or how many times I refresh to start over. There are no error messages so I do not know what is wrong.</p>
  <p>I have looked over my code several times and asked the person who taught this lesson but I cannot find where the problem is and I have not received a response in almost a week. I even asked the instructor for help again with a picture of the code but I still haven't received a response.</p>
  <p>My code is pretty long and it would require me to take multiple screen shots. I don't think that would be efficient in helping you understand the code and I don't think pasting the whole thing would help either. Despite that I will add more information if you need it and include a paste of the code</p>
  <pre><code>        dropdown.addEventListener(&quot;input&quot;, function() {
          /* Add class to header based off what is put down as header */
          console.log(dropdown.value);
          header.classList = &quot;&quot;; /* Take the class list and refresh it. Makes it so when you have a violet class and blue class it doesn't add both (only have one class at a time) */
          header.classList.add(dropdown.value); /* Changes the color of the h1 */
      });
  </code></pre>
  <p><a href="https://i.stack.imgur.com/FY4Jc.png" rel="nofollow noreferrer">dropdown javascript code that doesn't work</a></p>