title: Why are the icon classes not getting changed when using event listeners to detect changes?
body: <p>I was trying to do my own take of this: <a href="https://codepen.io/codifiedconcepts/pen/bwgxRq" rel="nofollow noreferrer">https://codepen.io/codifiedconcepts/pen/bwgxRq</a></p>
  <p>I've made a few tweaks, but when I change the time in the drop-downs, the icons don't change as intended. I've tested it by manually changing the time and the icons changed, and I've tested the event listeners by adding an alert box - everything is fine.</p>
  <p>But when I go to change on the drop-down themselves, the icons don't change. I just can't seem to get it to work.</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>  let wakeTime = 7;
      let noon = 12;
      let lunch = 12;
      let evening = 17;
      let dinner = 18;
      let bed = 21;
      
      
      //Setting time up 
      let showCurrentTime = () =&gt; {
          const clock = document.getElementById('clock');
          let currentTime = new Date();
          let hours = currentTime.getHours();
          let minutes = currentTime.getMinutes();
          let seconds = currentTime.getSeconds();
          let meridian = "AM";
      
               if (hours &gt;= noon)
            {
                meridian = "PM";
            }
      
            if (hours &gt; noon)
            {
                hours = hours - 12;
            }
       
          // Set Minutes
          if (minutes &lt; 10)
          {
              minutes = "0" + minutes;
          }
       
          // Set Seconds
          if (seconds &lt; 10)
          {
              seconds = "0" + seconds;
          }
              //Putting it all together 
              let clockTime = `${hours}:${minutes}:${seconds}  ${meridian}!`;
              clock.innerText = clockTime;
      };
      
      
      
      //Getting the clock to update on its own so it changes pictures and messages
      let updateClock = () =&gt; {
          let time = new Date().getHours();
          let message = document.getElementById('message');
          let icon = document.getElementById('food-icon');
      
          if(time === wakeTime){
              icon.classList.remove('fa-smile');
              icon.classList.add('fa-clock');
              message.textContent = 'Wakey wakey!';
          } else if (time === lunch){
              icon.classList.remove('fa-smile');
              icon.classList.add('fa-hotdog');
              message.textContent = "I'm hungry."
          } else if (time === dinner ) {
              icon.classList.remove('fa-smile');
              icon.classList.add('fa-utensils');
              message.textContent = "Can I have more food?";
          } else if (time === bed){
              icon.classList.remove('fa-smile');
              icon.classList.add('fa-bed');
              message.textContent = "YAWN";
          } else if (time &gt;= noon ) {
              icon.classList.add('fa-smile');
              message.textContent = "Good afternoon!"
          } else if (time &lt; noon) {
              icon.classList.add('fa-smile');
              message.innerHtml = "Good morning!";
          } else if (time &gt;= evening) {
              icon.classList.add('fa-smile');
              message.textContent = "Good evening!";
          }
          showCurrentTime();
      };
      updateClock();
      
      //Getting the clock to increment once a second
      const oneSecond = 1000;
      setInterval(updateClock, oneSecond);
      
      const wakeSelect = document.querySelector('#wakeSelect')
      wakeSelect.addEventListener('change', function() {
          wakeTime = wakeSelect.value;
      });
      
      const lunchSelect = document.querySelector('#lunchSelect')
      lunchSelect.addEventListener('change', () =&gt; {
          lunch = lunchSelect.value;
      });
      
      const dinnerSelect = document.querySelector('#dinnerSelect')
      dinnerSelect.addEventListener('change', () =&gt; {
          dinner = dinnerSelect.value;
      });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;!--[if lt IE 7]&gt;      &lt;html class="no-js lt-ie9 lt-ie8 lt-ie7"&gt; &lt;![endif]--&gt;
  &lt;!--[if IE 7]&gt;         &lt;html class="no-js lt-ie9 lt-ie8"&gt; &lt;![endif]--&gt;
  &lt;!--[if IE 8]&gt;         &lt;html class="no-js lt-ie9"&gt; &lt;![endif]--&gt;
  &lt;!--[if gt IE 8]&gt;&lt;!--&gt; &lt;html class="no-js"&gt; &lt;!--&lt;![endif]--&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
          &lt;title&gt;Vanilla JS Clock&lt;/title&gt;
          &lt;meta name="description" content=""&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
          &lt;link rel="stylesheet" href=""&gt;
          &lt;script src="https://kit.fontawesome.com/35e4240984.js" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;!--[if lt IE 7]&gt;
              &lt;p class="browsehappy"&gt;You are using an &lt;strong&gt;outdated&lt;/strong&gt; browser. Please &lt;a href="#"&gt;upgrade your browser&lt;/a&gt; to improve your experience.&lt;/p&gt;
          &lt;![endif]--&gt;
          
          &lt;h1&gt;What time is it!?&lt;/h1&gt;
          &lt;span id="clock"&gt;Clock goes here&lt;/span&gt;
          
          &lt;div class="icon-wrapper"&gt;
          &lt;i id="food-icon" class="fa-5x fas"&gt;&lt;/i&gt;
          &lt;/div&gt;
          &lt;div id="message"&gt;
              &lt;p&gt;Hello!&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;label&gt;Choose wake up time:&lt;/label&gt;
          &lt;select id="wakeSelect"&gt;
              &lt;option value="1"&gt;1 AM&lt;/option&gt;
              &lt;option value="2"&gt;2 AM&lt;/option&gt;
              &lt;option value="3"&gt;3 AM - 4AM&lt;/option&gt;
              &lt;option value="4"&gt;4 AM - 5AM&lt;/option&gt;
              &lt;option value="5"&gt;5 AM - 6AM&lt;/option&gt;
              &lt;option value="6"&gt;6 AM - 7AM&lt;/option&gt;
              &lt;option value="7"&gt;7 AM - 8AM&lt;/option&gt;
              &lt;option value="8" selected&gt;8 AM - 9AM&lt;/option&gt;
              &lt;option value="9"&gt;9 AM - 10AM&lt;/option&gt;
              &lt;option value="10"&gt;10 AM - 11AM&lt;/option&gt;
              &lt;option value="11"&gt;11 AM - 12PM&lt;/option&gt;
              &lt;option value="12"&gt;12 PM - 1PM&lt;/option&gt;
              &lt;option value="13"&gt;1 PM - 2PM&lt;/option&gt;
              &lt;option value="14"&gt;2 PM - 3PM&lt;/option&gt;
              &lt;option value="15"&gt;3 PM - 4PM&lt;/option&gt;
              &lt;option value="16"&gt;4 PM - 5PM&lt;/option&gt;
              &lt;option value="17"&gt;5 PM - 6PM&lt;/option&gt;
              &lt;option value="18"&gt;6 PM - 7PM&lt;/option&gt;
              &lt;option value="19"&gt;7 PM - 8PM&lt;/option&gt;
              &lt;option value="20"&gt;8 PM - 9PM&lt;/option&gt;
              &lt;option value="21"&gt;9 PM - 10PM&lt;/option&gt;
              &lt;option value="22"&gt;10 PM - 11PM&lt;/option&gt;
              &lt;option value="23"&gt;11 PM - 12AM&lt;/option&gt;
              &lt;option value="24"&gt;12 AM - 1AM&lt;/option&gt;
            &lt;/select&gt;
          
           &lt;label for="lunchSelect"&gt;Choose lunch time&lt;/label&gt; 
              &lt;select id="lunchSelect"&gt;
                &lt;option value="1"&gt;1 AM - 2AM&lt;/option&gt;
                &lt;option value="2"&gt;2 AM - 3AM&lt;/option&gt;
                &lt;option value="3"&gt;3 AM - 4AM&lt;/option&gt;
                &lt;option value="4"&gt;4 AM - 5AM&lt;/option&gt;
                &lt;option value="5"&gt;5 AM - 6AM&lt;/option&gt;
                &lt;option value="6"&gt;6 AM - 7AM&lt;/option&gt;
                &lt;option value="7"&gt;7 AM - 8AM&lt;/option&gt;
                &lt;option value="8"&gt;8 AM - 9AM&lt;/option&gt;
                &lt;option value="9"&gt;9 AM - 10AM&lt;/option&gt;
                &lt;option value="10"&gt;10 AM - 11AM&lt;/option&gt;
                &lt;option value="11"&gt;11 AM - 12PM&lt;/option&gt;
                &lt;option value="12" selected&gt;12 PM - 1PM&lt;/option&gt;
                &lt;option value="13"&gt;1 PM - 2PM&lt;/option&gt;
                &lt;option value="14"&gt;2 PM - 3PM&lt;/option&gt;
                &lt;option value="15"&gt;3 PM - 4PM&lt;/option&gt;
                &lt;option value="16"&gt;4 PM - 5PM&lt;/option&gt;
                &lt;option value="17"&gt;5 PM - 6PM&lt;/option&gt;
                &lt;option value="18"&gt;6 PM - 7PM&lt;/option&gt;
                &lt;option value="19"&gt;7 PM - 8PM&lt;/option&gt;
                &lt;option value="20"&gt;8 PM - 9PM&lt;/option&gt;
                &lt;option value="21"&gt;9 PM - 10PM&lt;/option&gt;
                &lt;option value="22"&gt;10 PM - 11PM&lt;/option&gt;
                &lt;option value="23"&gt;11 PM - 12AM&lt;/option&gt;
                &lt;option value="24"&gt;12 AM - 1AM&lt;/option&gt;
              &lt;/select&gt;
  
        
  
              &lt;label&gt;Choose dinner time&lt;/label&gt; 
              &lt;select id="dinnerSelect"&gt;
                &lt;option value="1"&gt;1 AM - 2AM&lt;/option&gt;
                &lt;option value="2"&gt;2 AM - 3AM&lt;/option&gt;
                &lt;option value="3"&gt;3 AM - 4AM&lt;/option&gt;
                &lt;option value="4"&gt;4 AM - 5AM&lt;/option&gt;
                &lt;option value="5"&gt;5 AM - 6AM&lt;/option&gt;
                &lt;option value="6"&gt;6 AM - 7AM&lt;/option&gt;
                &lt;option value="7"&gt;7 AM - 8AM&lt;/option&gt;
                &lt;option value="8"&gt;8 AM - 9AM&lt;/option&gt;
                &lt;option value="9"&gt;9 AM - 10AM&lt;/option&gt;
                &lt;option value="10"&gt;10 AM - 11AM&lt;/option&gt;
                &lt;option value="11"&gt;11 AM - 12PM&lt;/option&gt;
                &lt;option value="12"&gt;12 PM - 1PM&lt;/option&gt;
                &lt;option value="13"&gt;1 PM - 2PM&lt;/option&gt;
                &lt;option value="14"&gt;2 PM - 3PM&lt;/option&gt;
                &lt;option value="15"&gt;3 PM - 4PM&lt;/option&gt;
                &lt;option value="16"&gt;4 PM - 5PM&lt;/option&gt;
                &lt;option value="17"&gt;5 PM - 6PM&lt;/option&gt;
                &lt;option value="18" selected&gt;6 PM &amp;ndash; 7PM&lt;/option&gt;
                &lt;option value="19"&gt;7 PM - 8PM&lt;/option&gt;
                &lt;option value="20"&gt;8 PM - 9PM&lt;/option&gt;
                &lt;option value="21"&gt;9 PM - 10PM&lt;/option&gt;
                &lt;option value="22"&gt;10 PM - 11PM&lt;/option&gt;
                &lt;option value="23"&gt;11 PM - 12AM&lt;/option&gt;
                &lt;option value="24"&gt;12 AM - 1AM&lt;/option&gt;
              &lt;/select&gt;
   
     
          &lt;script src="index.js" async defer&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
              </code></pre>
  </div>
  </div>
  </p>