я пытаюсь иметь несколько таймеров на 1 странице, которые активируются, когда пользователь меняет опцию в выборе. у проекта есть входные данные, которые сохраняют значение и создают, а затем добавляют значение к опциям. я пытаюсь активировать таймер onChange параметров.
я добавил его в codepen, так что это будет легко понять.
я не могу найти способ сохранить таймер для каждого tr,и перезапускается с помощью onChange.
https://codepen.io/taldesign/project/editor/ZvxYkV#0
var ids = ["lobby", "tThree"];
var gurds = [];
var counter = 0;
var seconds = 0;
var minutes = 0;
var clockCounter = 0;
function createList() {
var userInput = document.getElementById("uGurd");
gurds.push(userInput.value);
userInput.value = "";
}
function userFinish() {
while (counter < ids.length) {
var row = document.getElementById(ids[counter]);
var td = document.createElement("TD");
row.appendChild(td);
var select = document.createElement("SELECT");
td.appendChild(select);
for (var j = 0; j < gurds.length; j++) {
var option = document.createElement("OPTION");
option.innerText = gurds[j];
select.appendChild(option);
}
counter++;
}
}
setInterval(function () {
var distance = 3600;
if (distance > 3600) {
clearInterval();
// document.getElementById("demo").innerHTML = "EXPIRED";
}
if (seconds % 60 == 0 && seconds > 1) {
seconds = 0;
minutes++;
}
var clockPosition = document.getElementsByClassName("clock");
while (clockCounter < clockPosition.length) {
clockPosition[clockCounter].innerText = seconds + " : " + minutes + " ";
clockCounter++;
}
clockCounter = 0;
seconds++;
}, 1000);
/**
* index.scss
* - Add any styles you want here!
*/
body {
background: #f5f5f5;
}
.HR {
display: flex;
align-content: center;
justify-content: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>My New Pen!</title>
<!-- Styles -->
<link rel="stylesheet" href="styles/index.processed.css">
</head>
<body>
<section>
<container class="HR">
<div class="flex fullwidth">
<input type="text" id="uGurd" placeholder="add name here">
</div>
<div class="flex fullwidth">
<button type="button" id="clearList" value="add" onclick="createList()">add</button>
</div>
</container>
</section>
<section>
<container class="HR">
<div class="shuffleDiv">
<button value="distribute" onclick="userFinish()">send</button>
</div>
</container>
</section>
<section>
<container class="HR">
<table id="result">
<tr>
<th>position</th>
<th>time</th>
<th>worker</th>
</tr>
<tr id="lobby">
<td>Lobby</td>
<td class="clock"></td>
</tr>
<tr id="tThree">
<td>36</td>
<td class="clock"></td>
</tr>
</table>
</container>
</section>
<script src="scripts/index.js"></script>
</body>
</html>