Javascript 我需要为document.querySelectorAll创建for循环的帮助_Javascript_Forms_Loops

Javascript 我需要为document.querySelectorAll创建for循环的帮助

javascript forms loops

Javascript 我需要为document.querySelectorAll创建for循环的帮助,javascript,forms,loops,Javascript,Forms,Loops,我需要帮助为document.queryselectoral.suit创建for循环。我正在尝试创建一个表单，您可以在其中输入生日，输出总共365个选项。示例输出放在HTML中 <html> <head> <style type="text/css"> .suit { display: none; } .suit.visible { display: block; } </style> <scrip

我需要帮助为document.queryselectoral.suit创建for循环。我正在尝试创建一个表单，您可以在其中输入生日，输出总共365个选项。示例输出放在HTML中

    <html>
    <head> 
  <style type="text/css">
 .suit {
    display: none;
 }

 .suit.visible {
display: block;
 }
 </style>
 <script type="text/javascript">


   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
    }

  }

  </script>

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

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

<button id="submit">Submit</button>

<div class="suit" month="8" day="27">Queen of Hearts, 10 of clubs</div>

<!-- TODO content -->

querySelectorAll返回一个类似数组的数据结构，称为。您可以使用for循环对其进行迭代

这看起来像是家庭作业？实际上这是一个基于我非常感兴趣的东西的大型工作室项目：塔罗牌。因此，虽然这是“家庭作业”，但实际上这是我整个学期都在做的一个大项目。建议使用classList设置类，而不是设置类属性。谢谢jfriend0，这有点奏效了。但是我没有得到我想要的确切日期输出，而是得到了整个结果列表。我只希望每个日期组合有一个不同的日期。@LorraineNazaire-如果这回答了您的问题，您可以通过单击答案左侧的绿色复选标记向社区表明这一点。我不明白整个结果列表是什么意思。也许这应该被放到一个新的问题中去。红桃皇后、10家黑桃王俱乐部、5家俱乐部JFriend00的HTML字符串就是结果的两个例子。当我单击“提交”时，它们都同时显示。@LorraineNazaire-您的代码为每个.suit对象分配了一个新的类名。这就是你编码它的目的。如果你有一个不同的目标，请在一个新的问题中描述这个目标，并说明HTML以前是什么样子，以及你希望它以后是什么样子。这里的人当然可以帮助你，但你必须非常清楚地描述你试图实现的目标。在这一点上，我建议你开始一个新的问题。

submitButton.onclick = function() {
    var items = document.querySelectorAll(".suit");
    for (var i = 0; i < items.length; i++) {
       items[i].className = "suit visible";
    }
}