（为什么你不应该把函数放在一个循环中） document.getElementById 得到了错误的表单来提交（）

Question

解决方案不要在循环中包含脚本。 应该放在全局scope

下面的代码循环遍历餐厅列表并为每个餐厅生成一个开关（复选框）。 由于我想向 servlet“activate-res”生成一个 POST 请求，我将每个开关绑定到一个表单并使用 onClick 来检测将表单提交给 servlet 的时刻。 每个表单都被分配了一个唯一的 ID，它是“form{restaurantID}”，每个表单都有一个隐藏字段，其中包含一个存储唯一餐厅 ID 的参数。

到目前为止，我的名单上有两家餐厅。 它们的 ID 分别为 1 和 2。

问题：document.getElementById 似乎返回了错误的表单，因为 servlet 接收参数“res”为 2，无论我按下了切换按钮（这意味着如果我单击第一个切换按钮，它应该将 res 提交为 1 但它是 2)。

临时不可扩展解决方案：我对 forms 进行了两次硬编码（而不是使用循环），并为第二种形式的 getElementById 提供了“ form1 ”的 id。 servlet 收到的参数现在是 1 而不是 2。因此，我相信它正在检索错误的形式。

我还验证了两个restaurantID 确实与我放置的调试行是唯一的。 此外，我还“检查元素”并确认两者都有唯一的 ID，并且它们的 getElementById 正在调用其相应表单的 ID。

<% ArrayList<Restaurant> restaurants = (ArrayList<Restaurant>) session.getAttribute("restaurants"); %>
    <c:forEach items="${restaurants}" var="restaurant">
       <div class="flex-column">
           <form class="mt-3" id="form${restaurant.restaurantID}" action="activate-res" method="post">
                  <input id="switch" type="checkbox"
                     <c:choose>
                     <c:when test="${restaurant.activate == true}"> checked </c:when> 
                     <c:otherwise> unchecked </c:otherwise> 
                     </c:choose>>
    
                  <label class="d-inline-flex" for="switch" onclick="submitForm()"></label>
                                            
                  <input type="hidden" name="res" value="${restaurant.restaurantID}">
                  <a>"${restaurant.restaurantID}"</a> <%--My Debug Line--%>
           </form>
           <script>
              function submitForm() {
                 const form = document.getElementById("form${restaurant.restaurantID}");
                 form.submit();
              }
           </script>
       </div>
    </c:if>
</c:forEach>