Я рендерим переменные из файла js в файл ejs и хочу создать выпадающий список, когда наведу курсор на кнопку.Но число опций, которые будут перечислены, является динамическим и отображается из файла js.Предположим, что при наведении на кнопку дает нам 3 варианта, таких как 1001, 1002 и 1003. Когда я нажимаю на любой из параметров, я должен получить всплывающую форму для каждого параметра.
Я использую цикл for для обходамассив и создать столько всплывающих форм.Но проблема в том, что цикл for не увеличивается внутри «тега формы».Вся сгенерированная форма относится к данным, хранящимся в нулевом индексе массива.
<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-м индексе моего массива