querySelectorAllを使用して複数の要素スタイルを更新する

Question

ユーザーは、ドロップダウンセレクターを使用してhtmlフォームを送信して、ページの特定のCSSプロパティ、特にフッター要素内の特定のCSSプロパティを更新できるようにしようとしています。しかし、私のjquery（私はよく分からない）は、このトリックをやっていません。私はそれがquerySelectorAllと何か関係があると思うが、私はなぜそれがわからない。フッターの背景の最初のスタイルは、フォームサブタイトで正常に更新されます。

HTMLフォーム：

<form id="styleform"> 
    <div>Background:</div> 
    <div> 
     <select id="footerbgd">     
      <option value="#404040">Dark Grey</option> 
      <option value="#7B7B7B">Mid Grey</option> 
      <option value="#C5C5C5">Light Grey</option> 
      <option value="#E5E5E5">Lighter Grey</option> 
      <option value="#F4F4F4">Lightest Grey</option> 
      <option value="#ffffff">White</option> 
     </select>   
    </div>  
    <div>Text Link:</div> 
    <div> 
     <select id="footertextlink">      
      <option value="#404040">Dark Grey</option> 
      <option value="#7B7B7B">Mid Grey</option> 
      <option value="#C5C5C5">Light Grey</option> 
      <option value="#E5E5E5">Lighter Grey</option> 
      <option value="#F4F4F4">Lightest Grey</option> 
      <option value="#ffffff">White</option> 
     </select>   
    </div> 
    <input type="submit" value="Change Colors"> 
</form> 
<footer> 
    <ul> 
     <li> 
      <a>text link 1</a> 
     </li> 
     <li> 
      <a>text link 2</a> 
     </li> 
    </ul> 
</footer> 

は、ここに私のJSです：

$("#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(); 
    }); 

Answer 1

querySelectorAll()は、コレクションを返すので、あなたはそれをループする必要があり、個別に各要素に対してstyle.colorを呼び出します。これを行うにはforEach()を使用できます：

document.querySelectorAll("footer li a").forEach(function(el) { 
    el.style.color = Ftextlink; 
});