Multiple Timers on 1 page |
Multiple Timers on 1 page |
natlmc |
Jun 24 2021, 09:57 AM
Post
#1
|
Group: Members Posts: 3 Joined: 13-December 20 Member No.: 27,684 |
Hi, i'm looking for some help please. I currently have a html page that needs multiple timers that are independent of each other. I can get the first one to work, but once i try to use the second one, it resets the first. Im not sure what im doing wrong here. i'm quite new to this! any help would be appreciated.
I have attached Html file and JS script Thanks html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="css/styles.css"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/> <title>ZAOCC Timers</title> </head> <body> <p style="text-align:center;"> <audio id="sound"> <source src="audio/alarm_mp3.mp3" /> </audio> <div class="card-group"> <div class="card text-white bg-primary"> <div class="card-body"> <h4 class="card-title"><h4 style="text-align:center;">Timer 1 Name</h4> <p class="card-text"><p style="text-align:center;"><p style="text-align:center;"> <textarea row=""> </textarea><br><br> <!-- form --> <form class="form"> <!-- countdown time input field --> <p style="text-align:center;"><input type="number" min="1" class="time-input" placeholder="Enter Countdown"><p><br> <p style="text-align:center;"><p style="text-align:center;"> <!-- options --> <select name="format"> <option value="hours">Hours</option> <option value="minutes">Minutes</option> <option value="seconds">Seconds</option> </select> <!-- submit button or set button --> <button type="submit" class="set-btn1" name="t1_start">Start</button> </form><br> <!-- countdown text --> <p style="text-align:center;"> <p class="countdown">00 : 00 : 00</p><br> <!-- buttons --> <div class="buttons"><p style="text-align:center;"> <button class="stop-btn" disabled>Pause Timer</button> <button class="reset-btn" disabled>Reset Timer</button> <button class="alarm-btn" disabled>Stop Alarm</button> </div> </div> </div> <!--------------------------------------------------CARD 2 ----------------------------------------------------> <div class="card text-white bg-success mb-3" style="width: 20rem;"> <div class="card-body"> <h4 class="card-title"><h4 style="text-align:center;">Timer 2 Name</h4> <p class="card-text"><p style="text-align:center;"><p style="text-align:center;"> <textarea row=""> </textarea><br><br> <!-- form --> <form class="form"> <!-- countdown time input field --> <p style="text-align:center;"><input type="number" min="1" class="time-input" placeholder="Enter Countdown"><p><br> <p style="text-align:center;"><p style="text-align:center;"> <!-- options --> <select name="format"> <option value="hours">Hours</option> <option value="minutes">Minutes</option> <option value="seconds">Seconds</option> </select> <!-- submit button or set button --> <button type="submit" class="set-btn2" name="t2_start">Start</button> </form><br> <!-- countdown text --> <p style="text-align:center;"> <p class="countdown">00 : 00 : 00</p><br> <!-- buttons --> <div class="buttons"><p style="text-align:center;"> <button class="stop-btn" disabled>Pause Timer</button> <button class="reset-btn" disabled>Reset Timer</button> <button class="alarm-btn" disabled>Stop Alarm</button> </div> </div> </div> <!--------------------------------------------------CARD 3 ----------------------------------------------------> <div class="card text-white bg-warning mb-3" style="width: 20rem;"> <div class="card-body"> <h4 class="card-title"><h4 style="text-align:center;">Timer 3 Name</h4> <p class="card-text"><p style="text-align:center;"><p style="text-align:center;"> <textarea row=""> </textarea><br><br> <!-- form --> <form class="form"> <!-- countdown time input field --> <p style="text-align:center;"><input type="number" min="1" class="time-input" placeholder="Enter Countdown"><p><br> <p style="text-align:center;"><p style="text-align:center;"> <!-- options --> <select name="format"> <option value="hours">Hours</option> <option value="minutes">Minutes</option> <option value="seconds">Seconds</option> </select> <!-- submit button or set button --> <button type="submit" class="set-btn3" name="t3_start">Start</button> </form><br> <!-- countdown text --> <p style="text-align:center;"> <p class="countdown">00 : 00 : 00</p><br> <!-- buttons --> <div class="buttons"><p style="text-align:center;"> <button class="stop-btn" disabled>Pause Timer</button> <button class="reset-btn" disabled>Reset Timer</button> <button class="alarm-btn" disabled>Stop Alarm</button> </div> </div> </div> <!--------------------------------------------------CARD 4 ----------------------------------------------------> <div class="card text-white bg-danger mb-3" style="width: 20rem;"> <div class="card-body"> <h4 class="card-title"><h4 style="text-align:center;">Timer 4 Name</h4> <p class="card-text"><p style="text-align:center;"><p style="text-align:center;"> <textarea row=""> </textarea><br><br> <!-- form --> <form class="form"> <!-- countdown time input field --> <p style="text-align:center;"><input type="number" min="1" class="time-input" placeholder="Enter Countdown"><p><br> <p style="text-align:center;"><p style="text-align:center;"> <!-- options --> <select name="format"> <option value="hours">Hours</option> <option value="minutes">Minutes</option> <option value="seconds">Seconds</option> </select> <!-- submit button or set button --> <button type="submit" class="set-btn4" name="t4_start">Start</button> </form><br> <!-- countdown text --> <p style="text-align:center;"> <p class="countdown">00 : 00 : 00</p><br> <!-- buttons --> <div class="buttons"><p style="text-align:center;"> <button class="stop-btn" disabled>Pause Timer</button> <button class="reset-btn" disabled>Reset Timer</button> <button class="alarm-btn" disabled>Stop Alarm</button> </div> </div> </div> <!--------------------------------------------------CARD 5 ----------------------------------------------------> <div class="card text-white bg-info mb-3" style="width: 20rem;"> <div class="card-body"> <h4 class="card-title"><h4 style="text-align:center;">Timer 5 Name</h4> <p class="card-text"><p style="text-align:center;"><p style="text-align:center;"> <textarea row=""> </textarea><br><br> <!-- form --> <form class="form"> <!-- countdown time input field --> <p style="text-align:center;"><input type="number" min="1" class="time-input" placeholder="Enter Countdown"><p><br> <p style="text-align:center;"><p style="text-align:center;"> <!-- options --> <select name="format"> <option value="hours">Hours</option> <option value="minutes">Minutes</option> <option value="seconds">Seconds</option> </select> <!-- submit button or set button --> <button type="submit" class="set-btn5" name="t5_start">Start</button> </form><br> <!-- countdown text --> <p style="text-align:center;"> <p class="countdown">00 : 00 : 00</p><br> <!-- buttons --> <div class="buttons"><p style="text-align:center;"> <button class="stop-btn" disabled>Pause Timer</button> <button class="reset-btn" disabled>Reset Timer</button> <button class="alarm-btn" disabled>Stop Alarm</button> </div> </div> </div> </div> <script type="text/javascript" src="js/script.js"></script> </body> </html> JS Script /* grab necessary elements */ // grab the .form const form = document.querySelector('.form'); // grab the .time-input const timeInput = document.querySelector('.time-input'); // grab the select[name='format'] const format = document.querySelector("select[name='format']"); // grab the .set-btn const setBtn = document.querySelector('.set-btn'); // grab the .countdown const countDown = document.querySelector('.countdown'); // grab the .stop-btn const stopBtn = document.querySelector('.stop-btn'); // grab the .reset-btn const resetBtn = document.querySelector('.reset-btn'); /* grab necessary elements ends */ /* global variables and constants*/ // variable to store setInterval let countDownInterval; // secondsLeft in millisecond let secondsLeftms; // end time let endTime; // .stop-btn clicked or not let stopBtnClicked = false; /* global variables ends */ /* .stop-btn click listener */ stopBtn.addEventListener('click', () => { // toggle the value of 'stopBtnClicked' stopBtnClicked = !stopBtnClicked; // if Stop Alarm button is clicked if (stopBtnClicked === true) { // change the text to 'Restart Timer' stopBtn.innerHTML = 'Restart Timer'; // enable the .reset-btn resetBtn.disabled = false; // clear the setInterval() inorder to freeze the countdown timer clearInterval(countDownInterval); } else if (stopBtnClicked === false) { // if Restsart button is clicked // then change text to 'Pause Timer' stopBtn.innerHTML = 'Pause Timer'; // disable the .reset-btn resetBtn.disabled = true; // then update endTime endTime = secondsLeftms + Date.now(); // set a new setInterval() countDownInterval = setInterval(() => { setCountDown(endTime); }, 1000); } }); /* .stop-btn click listener ends */ /* .reset-btn click listener */ resetBtn.addEventListener('click', () => { resetCountDown(); }); /* .reset-btn click listener ends */ /* .form submit listener */ form.addEventListener('submit', (event) => { // prevent the default page reloading event.preventDefault(); // get the countdown time user typed let countDownTime = timeInput.value; // check if it is not zero if (countDownTime > 0) { // check which is the format, ie the <select> element's value if (format.value === 'hours') { // convert hours to milliseconds // 1 hrs = 3600000 ms (5 zeros) countDownTime = countDownTime * 3600000; } else if (format.value === 'minutes') { // 1 minute = 60000 ms (4 zeros) countDownTime = countDownTime * 60000; } else if (format.value === 'seconds') { // 1 seconds = 1000 ms (3 zeros) countDownTime = countDownTime * 1000; } // get current time in milliseconds const now = Date.now(); // calculate the ending time endTime = now + countDownTime; //Endtime based on Odd/Even Hour //endTime = getNextCallTime() // activate the countdown at first setCountDown(endTime); countDownInterval = setInterval(() => { setCountDown(endTime); }, 1000); // then disable the .set-btn setBtn.disabled = true; // then enable the .stop-btn stopBtn.disabled = false; } }); /* .form submit listener ends */ /* setCountDown function */ const setCountDown = (endTime) => { // calculate how many milliseconds is left to reach endTime from now secondsLeftms = endTime - Date.now(); // convert it to seconds const secondsLeft = Math.round(secondsLeftms / 1000); // calculate the hours, minutes and seconds let hours = Math.floor(secondsLeft / 3600); let minutes = Math.floor(secondsLeft / 60) - (hours * 60); let seconds = secondsLeft % 60; // adding an extra zero infront of digits if it is < 10 if (hours < 10) { hours = `0${hours}`; } if (minutes < 10) { minutes = `0${minutes}`; } if (seconds < 10) { seconds = `0${seconds}`; } // stopping the timer if the time is up if (secondsLeft < 0) { resetCountDown(); return; } // set the .countdown text countDown.innerHTML = `${hours} : ${minutes} : ${seconds}`; }; /* setCountDown function ends */ /* resetCountDown function */ const resetCountDown = () => { // destroy the setInterval() clearInterval(countDownInterval); // reset the countdown text countDown.innerHTML = '00 : 00 : 00'; // set stopBtnClicked = false stopBtnClicked = false; // change inner text to Pause Timer stopBtn.innerHTML = 'Pause Timer'; // enable .set-btn setBtn.disabled = false; // disable .stop-btn and .reset-btn stopBtn.disabled = true; resetBtn.disabled = true; }; /* resetCountDown function ends */ /* Work out Lonework Ring time */ const getNextCallTime = () => { const now = Date.now(); var dyear = new Date().getFullYear(); var dmonth = new Date().getMonth(); var dday = new Date().getDate(); var dhour = new Date().getHours(); //if current hour is odd then add 1 hour else add 2 hour if (dhour % 2 === 1) { return new Date(dyear, dmonth, dday, dhour + 1, 0) } else { return new Date(dyear, dmonth, dday, dhour + 2, 0) } } Attached File(s) timer.html ( 7.56k ) Number of downloads: 72 |
pandy |
Jun 24 2021, 01:04 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,753 Joined: 9-August 06 Member No.: 6 |
The script isn't designed to work with more than one form. It identifies form fields by the name of the classes they have. And all your forms have the same classes. The script will only look at the first instance. Even if you use different classes for different forms, the script isn't written to work like that. A whole lot of logic would need to be added and I think it would be a major rewrite. It's probably easier to do it from scratch.
Christian may have some idea, but I think he'll agree with me. But you never know. |
Lo-Fi Version | Time is now: 26th September 2024 - 03:45 AM |