I’m currently creating a Simple Pomodoro timer. I have a function to start the countdown, and it only works on the first 25 minute timer. When I use it for the others (break times), it does not work. Not only the startCountdown() function but also the functions which activates an icon.
HTML:
<div id="break" style="display: none">
<div id="outerBorder">
<div id="bodybg">
<div class="absButtonBreak">
<img id="fiveMin" src="Objects/buttonsBreak/5m.png" onclick="showPage('forFive')">
<img id="ftnMin" src="Objects/buttonsBreak/15m.png" onclick="showPage('forFifteen')">
<img id="thrtMin" src="Objects/buttonsBreak/30m.png" onclick="showPage('forTwenty')">
</div>
<img src="Objects/Back.png" class="buttonBack" onclick="showPage('pg1')">
</div>
</div>
</div>
</div>
<!-- There's a page called "break" where "forFive" is in-->
<div id="forFive" style="display: none;">
<div id="outerBorder">
<div id="bodybg">
<img id="catBus" src="Objects/Icon_CatBus/catBus1.png" class="icon_CB">
<div id="timer">
<img id="minTens" class="digit">
<img id="minOnes" class="digit">
<span>:</span>
<img id="secTens" class="digit">
<img id="secOnes" class="digit">
</div>
<div class="buttonsTimer">
<img id="strtBtn5" src="Objects/Strt.png" class="buttonStart">
<img id="stop" src="Objects/Stop.png" class="buttonStop" onclick="showPage('break')">
</div>
<img id="back" src="Objects/Back.png" class="buttonBack" >
</div>
</div>
</div>`
JS:
let timer;
let mins = 0;
let secs = 0;
function startCountdown(m, s) {
clearInterval(timer);
mins = m;
secs = s;
setDigit("minTens", Math.floor(mins / 10));
setDigit("minOnes", mins % 10);
setDigit("secTens", Math.floor(secs / 10));
setDigit("secOnes", secs % 10);
timer = setInterval (() => {
if (secs === 0 && mins === 0) {
clearInterval(timer);
const icon = document.getElementById("catBus");
icon.src = "Objects/Icon_CatBus/catBus1.png";
} else {
if (secs === 0) {
mins--;
secs = 59;
} else {
secs--;
}
setDigit("minTens", Math.floor(mins / 10));
setDigit("minOnes", mins % 10);
setDigit("secTens", Math.floor(secs / 10));
setDigit("secOnes", secs % 10);
}
}, 1000);
}
//some other things
This is what I did in order to categorize it by time:
document.getElementById("strtBtn25").addEventListener("click", () => {
startCountdown(25,0);
activateIconCB();
})
document.getElementById("strtBtn5").addEventListener("click", () => {
startCountdown(5,0);
activateIconCB();
})
How do I make the functions to work for other divs/ids or whatever you call them? (trying to make strtBtn5 also work like strtBtn25)