Javascript — JS несколько таймеров, которые активируются с onChange

JS несколько таймеров, которые активируются с помощью onChange {amp}lt;select{amp}gt;

Я пытаюсь иметь несколько таймеров на 1 странице, которая активируется, когда пользователь меняет опцию в выборе. у проекта есть входные данные, которые сохраняют значение и создают, а затем добавляют значение к опциям. Я пытаюсь активировать таймер на изменение параметров.

я добавил его в 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 {amp}lt; 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 {amp}lt; gurds.length; j  ) { var option = document.createElement("OPTION"); option.innerText = gurds[j]; select.appendChild(option); } counter  ; } } setInterval(function () { var distance = 3600; if (distance {amp}gt; 3600) { clearInterval(); // document.getElementById("demo").innerHTML = "EXPIRED"; } if (seconds % 60 == 0 {amp}amp;{amp}amp; seconds {amp}gt; 1) { seconds = 0; minutes  ; } var clockPosition = document.getElementsByClassName("clock"); while (clockCounter {amp}lt; 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; } 
 {amp}lt;!DOCTYPE html{amp}gt; {amp}lt;html lang="en"{amp}gt; {amp}lt;head{amp}gt; {amp}lt;!-- Meta --{amp}gt; {amp}lt;meta charset="UTF-8" /{amp}gt; {amp}lt;title{amp}gt;My New Pen!{amp}lt;/title{amp}gt; {amp}lt;!-- Styles --{amp}gt; {amp}lt;link rel="stylesheet" href="styles/index.processed.css"{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;section{amp}gt; {amp}lt;container class="HR"{amp}gt; {amp}lt;div class="flex fullwidth"{amp}gt; {amp}lt;input type="text" id="uGurd" placeholder="add name here"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="flex fullwidth"{amp}gt; {amp}lt;button type="button" id="clearList" value="add" onclick="createList()"{amp}gt;add{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/container{amp}gt; {amp}lt;/section{amp}gt; {amp}lt;section{amp}gt; {amp}lt;container class="HR"{amp}gt; {amp}lt;div class="shuffleDiv"{amp}gt; {amp}lt;button value="distribute" onclick="userFinish()"{amp}gt;send{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/container{amp}gt; {amp}lt;/section{amp}gt; {amp}lt;section{amp}gt; {amp}lt;container class="HR"{amp}gt; {amp}lt;table id="result"{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;th{amp}gt;position{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;time{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;worker{amp}lt;/th{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr id="lobby"{amp}gt; {amp}lt;td{amp}gt;Lobby{amp}lt;/td{amp}gt; {amp}lt;td class="clock"{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr id="tThree"{amp}gt; {amp}lt;td{amp}gt;36{amp}lt;/td{amp}gt; {amp}lt;td class="clock"{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/table{amp}gt; {amp}lt;/container{amp}gt; {amp}lt;/section{amp}gt; {amp}lt;script src="scripts/index.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector