Question

我正在将变量从js文件转换为ejs文件，并希望将鼠标悬停在按钮上时创建一个下拉列表。但是要列出的选项数量是动态的，并且是从js文件呈现的。假设将鼠标悬停在该按钮上，将为我们提供3个选项，例如1001、1002和1003。当我单击任意一个选项时，应该为每个选项弹出一个表格。

我正在使用for循环遍历数组并创建许多弹出表单。但是问题是for循环没有在“ form tag”内部递增。生成的所有形式均引用存储在数组第零个索引内的数据。

<div class="dropdown" >
<button  class="dropbtn" >Node Management</button>
<div class="dropdown-content">
  <table>
    <tr>
  <% for(var i in bmsData.node_arr){%>
    <a href="#" class="trigger_popup_fricc" onclick="openForm_node()"><%= bmsData.node_arr[i] %></a>
    <div class="hover_bkgr_fricc" id="myForm_node">
      <form action="/DataRetrieval/bmsnode" class="form-container" method="post">

        <span class="helper"></span>
          <div>
            <h1>Node Configuration</h1>
            <label for="node"><b>Node :<%= bmsData.node_arr[i] %></b></label>
            <input type="text"  name="Node" value="<%= bmsData.node_arr[i] %>" readonly></h1>

                <h2>Temperature</h2>
                <label for="lowerlimit"><b>Lower Limit</b></label>
                <input type="number" placeholder="Enter Lower Limit" name="LLTemperature" value="<%= bmsData.temp_lower[i]%>" required>

                <label for="upperlimit"><b>Upper Limit</b></label>
                <input type="number" placeholder="Enter Upper Limit" name="ULTemperature" value="<%= bmsData.temp_upper[i]%>" required>

                <h2>Relative Humidity</h2>
                <label for="lowerlimit"><b>Lower Limit</b></label>
                <input type="number" placeholder="Enter Lower Limit" name="LLRelativeHumidity" value="<%= bmsData.rh_lower[i]%>" required>

                <label for="upperlimit"><b>Upper Limit</b></label>
                <input type="number" placeholder="Enter Upper Limit" name="ULRelativeHumidity" value="<%= bmsData.rh_upper[i]%>" required>

                <h2>Ambient Light</h2>
                <label for="lowerlimit"><b>Lower Limit</b></label>
                <input type="number" placeholder="Enter Lower Limit" name="LLAmbientLight" value="<%= bmsData.al_lower[i]%>" required>

                <label for="upperlimit"><b>Upper Limit</b></label>
                <input type="number" placeholder="Enter Upper Limit" name="ULAmbientLight" value="<%= bmsData.al_upper[i]%>" required>

            <button type="submit" class="btn">Save</button>
            <button type="button" class="btn cancel" onclick="closeForm_node()">Close</button>
        </div>
      </form>
    </div>
  </tr>
</table>

  <%}%>
</div>
</div>
<script>
function openForm_node()
 {document.getElementById("myForm_node").style.display = "block";}
function closeForm_node() {document.getElementById("myForm_node").style.display = "none";}
</script>

预期：节点1001的弹出表单应显示节点名称1001和节点1001的配置，类似于节点1002

实际：所有节点的弹出表单都显示了节点名和节点1001的配置，这些信息存储在我数组的第0个索引中

javascript数组变量未在ejs文件中的“表单标签”内递增

0 个答案: