I created a clock that tells the time every quarter as per the professor's request. However, there is an issue - when I click multiple times, the clock keeps telling the time repeatedly until the number of tellings matches the number of clicks. I thought about making the button only function once. In HTML, I tried: <input= id="talkBTN" type="submit" value="Tell the time!" onclick=this.disabled>
Unfortunately, this approach didn't fully solve the problem as it simply prevented me from using the button.
This is the code for "tell the time". I believe I should utilize addEventListener and removeEventListener.
function tellTime(){
let currentTime = new Date();
timeWords.push("timeis");
numToWords(currentTime.getHours());
numToWords(currentTime.getMinutes());
console.log(timeWords);
timeTeller.addEventListener("ended", sayWords);
sayWords();
}
function sayWords(){
if (timeWords.length > 0) {
timeTeller.src = soundURL + timeWords[0] + ".mp3";
timeTeller.play();
timeWords.shift();
} else {
timeTeller.removeEventListener("ended", sayWords);
}
}
function numToWords(value){
if(value <= 20){
timeWords.push(value);
} else {
let tens = Math.floor(value / 10);
timeWords.push(tens * 10);
if (value%10 != 0) {
timeWords.push(value%10);
}
}
}