title: Updating multiple element styles using querySelectorAll
body: <p>I am trying to allow a user to update certain css properties on a page, specifically within the footer element, by submitting an html form with drop downs selectors. However, my jquery (which i don't know well) isn't doing the trick.  I suspect it has something to do with querySelectorAll, but I'm not sure why. The first style, that of footer background, does successfully update on form subit.</p>
  
  <p>HTML Form:</p>
  
  <pre><code>&lt;form id="styleform"&gt;
      &lt;div&gt;Background:&lt;/div&gt;
      &lt;div&gt;
          &lt;select id="footerbgd"&gt;                 
              &lt;option value="#404040"&gt;Dark Grey&lt;/option&gt;
              &lt;option value="#7B7B7B"&gt;Mid Grey&lt;/option&gt;
              &lt;option value="#C5C5C5"&gt;Light Grey&lt;/option&gt;
              &lt;option value="#E5E5E5"&gt;Lighter Grey&lt;/option&gt; 
              &lt;option value="#F4F4F4"&gt;Lightest Grey&lt;/option&gt;
              &lt;option value="#ffffff"&gt;White&lt;/option&gt;
          &lt;/select&gt;           
      &lt;/div&gt;      
      &lt;div&gt;Text Link:&lt;/div&gt;
      &lt;div&gt;
          &lt;select id="footertextlink"&gt;                    
              &lt;option value="#404040"&gt;Dark Grey&lt;/option&gt;
              &lt;option value="#7B7B7B"&gt;Mid Grey&lt;/option&gt;
              &lt;option value="#C5C5C5"&gt;Light Grey&lt;/option&gt;
              &lt;option value="#E5E5E5"&gt;Lighter Grey&lt;/option&gt; 
              &lt;option value="#F4F4F4"&gt;Lightest Grey&lt;/option&gt;
              &lt;option value="#ffffff"&gt;White&lt;/option&gt;
          &lt;/select&gt;           
      &lt;/div&gt;
      &lt;input type="submit" value="Change Colors"&gt;
  &lt;/form&gt;
  &lt;footer&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;a&gt;text link 1&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a&gt;text link 2&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/footer&gt;
  </code></pre>
  
  <p>Here's my js:</p>
  
  <pre><code>$( "#styleform" ).on('submit',function( event ) {
          var Fbgd = document.getElementById("footerbgd").value;
          var Ftextlink = document.getElementById("footertextlink").value;
          document.querySelector("footer").style.background = Fbgd;
          document.querySelectorAll("footer li a").style.color = Ftextlink;
          event.preventDefault();
      }); 
  </code></pre>