I need help creating a for loop for document.querySelectorAll : <p>I need help creating a for loop for document.querySelectorAll(".suit"). I'm trying to create a form where you input the birthday and the output is a total of 365 options. The example output put is in the HTML.</p>

<pre><code>    &lt;html&gt;
    &lt;head&gt; 
  &lt;style type="text/css"&gt;
 .suit {
    display: none;
 }

 .suit.visible {
display: block;
 }
 &lt;/style&gt;
 &lt;script type="text/javascript"&gt;


   window.onload = function() {
    var monthSelection = document.querySelector("#month");
    var daySelection = document.querySelector("#day");
    var submitButton = document.querySelector("#submit");
    submitButton.onclick = function() {
    document.querySelectorAll(".suit").setAttribute("class", "suit     visible");
       // TODO hide everything else
    }

  }

  &lt;/script&gt;

 &lt;/head&gt;
  &lt;body&gt;
   Date Of Birth: &lt;br&gt;
&lt;select id="month" name="month"&gt;
&lt;option value="na"&gt;Month&lt;/option&gt;
&lt;option value="1"&gt;January&lt;/option&gt;
&lt;option value="2"&gt;February&lt;/option&gt;
&lt;option value="3"&gt;March&lt;/option&gt;
&lt;option value="4"&gt;April&lt;/option&gt;
&lt;option value="5"&gt;May&lt;/option&gt;
&lt;option value="6"&gt;June&lt;/option&gt;
&lt;option value="7"&gt;July&lt;/option&gt;
&lt;option value="8"&gt;August&lt;/option&gt;
&lt;option value="9"&gt;September&lt;/option&gt;
&lt;option value="10"&gt;October&lt;/option&gt;
&lt;option value="11"&gt;November&lt;/option&gt;
&lt;option value="12"&gt;December&lt;/option&gt;
&lt;/select&gt;

&lt;select id="day" name="day"&gt;
&lt;option value="na"&gt;Day&lt;/option&gt;
&lt;option value="1"&gt;1&lt;/option&gt;
&lt;option value="2"&gt;2&lt;/option&gt;
&lt;option value="3"&gt;3&lt;/option&gt;
&lt;option value="4"&gt;4&lt;/option&gt;
&lt;option value="5"&gt;5&lt;/option&gt;
&lt;option value="6"&gt;6&lt;/option&gt;
&lt;option value="7"&gt;7&lt;/option&gt;
&lt;option value="8"&gt;8&lt;/option&gt;
&lt;option value="9"&gt;9&lt;/option&gt;
&lt;option value="10"&gt;10&lt;/option&gt;
&lt;option value="11"&gt;11&lt;/option&gt;
&lt;option value="12"&gt;12&lt;/option&gt;
&lt;option value="13"&gt;13&lt;/option&gt;
&lt;option value="14"&gt;14&lt;/option&gt;
&lt;option value="15"&gt;15&lt;/option&gt;
&lt;option value="16"&gt;16&lt;/option&gt;
&lt;option value="17"&gt;17&lt;/option&gt;
&lt;option value="18"&gt;18&lt;/option&gt;
&lt;option value="19"&gt;19&lt;/option&gt;
&lt;option value="20"&gt;20&lt;/option&gt;
&lt;option value="21"&gt;21&lt;/option&gt;
&lt;option value="22"&gt;22&lt;/option&gt;
&lt;option value="23"&gt;23&lt;/option&gt;
&lt;option value="24"&gt;24&lt;/option&gt;
&lt;option value="25"&gt;25&lt;/option&gt;
&lt;option value="26"&gt;26&lt;/option&gt;
&lt;option value="27"&gt;27&lt;/option&gt;
&lt;option value="28"&gt;28&lt;/option&gt;
&lt;option value="29"&gt;29&lt;/option&gt;
&lt;option value="30"&gt;30&lt;/option&gt;
&lt;option value="31"&gt;31&lt;/option&gt;
&lt;/select&gt;

&lt;button id="submit"&gt;Submit&lt;/button&gt;

&lt;div class="suit" month="8" day="27"&gt;Queen of Hearts, 10 of clubs&lt;/div&gt;

&lt;!-- TODO content --&gt;
</code></pre>

<p></p>

<p></p>
