title: How to add onfocus event listener to input field to change the style of the labels
body: <p>I am trying to make my input labels change style to the <code>.fancyclass</code> style when I use <code>onfocus</code> on the input field. I was wondering how I would do this using event listeners in Javascript?</p>
  
  <pre><code>            &lt;fieldset name="in-fields"&gt;
  
                  &lt;section&gt;
                      &lt;label for ="inputname" class="name"&gt;Name*&lt;/label&gt;
                      First: &lt;br&gt;&lt;input type="text" name="info" required&gt;&lt;br/&gt;
                      Last: &lt;br&gt;&lt;input type="text" name="info" required&gt;&lt;br/&gt;
                  &lt;/section&gt;
  
                  &lt;section&gt;
                      &lt;label for="inputnumber" class ="name"&gt;Phone Number*&lt;/label&gt;
                      &lt;input type="text" name="info" required&gt;
                  &lt;/section&gt;
  
                  &lt;section&gt;
                      &lt;label for="inputemploy" class ="name"&gt;Current Employer&lt;/label&gt;
                      &lt;input type="text" name="info"&gt;
                  &lt;/section&gt;
  
                  &lt;section&gt;
                      &lt;label for="inputemail" class= "name"&gt;Email*&lt;/label&gt;
                      &lt;input type="email" name="info" required&gt;  
                  &lt;/section&gt;
  
             &lt;/fieldset&gt;
  
             .fancyclass {
             font-weight:bold;
             text-transform:uppercase;
             }
  
          document.querySelectorAll('input[name="info"]').forEach(item=&gt; {
              item.addEventListener('focus', event =&gt; {
              console.log("add fancy class");
              })
          })
  </code></pre>
  
  <p>This is what I have so far... I am pretty sure this is wrong. I don't know how to add the fancy class to the label when I focus on the input field. </p>