I'm currently developing an application and I’m trying to implement a countdown timer for each element. However, when I pass the element to my function as it is, the countdown does not work. Surprisingly though, if I modify the function slightly by updating the innerHTML of the element outside of the setInterval, it starts functioning properly. I’m at a loss here. Any help would be greatly appreciated :) const timeout represents the element in question.
const json_content = json_reader(reserved)
for(let x=0; x<json_content["key"].length; x++){
let tds = document.querySelectorAll(".display_content table td")
for(let td of tds){
new Vue({
delimiters: ['[[', ']]'],
el:td,
data: {
display: "test",
seats_number: "0",
},
methods:{
test(){
console.log("Hello")
}
},
created: ()=>{
const td_date = td.innerText
if(td_date.includes(json_content["key"][x])){
const td_hour = td.nextElementSibling
const json_hour = json_content["value"][x]["times"]
if(Object.keys(json_hour).includes(td_hour.innerText)){
const seats = json_content["value"][x]["times"][td_hour.innerText]
const td_seat = td_hour.nextElementSibling
const timeout = td_seat.nextElementSibling
const seats_array = []
seats.forEach(element => {
const seat_json = json_reader(element)
seats_array.push(seat_json["key"]+":"+seat_json["value"])
});
this.seats_number = seats.length
td_seat.innerHTML = "<span onclick='display_seats(this.nextSibling)'>"+[[this.seats_number]]+"</span>"+"<span class='seats' value='"+seats_array+"'></span>"
counter(timeout)
}
}
}
})
}
}
and here's the counter function:
function counter(element){
var t = 10
setInterval(()=>{
element.innerHTML = String(t)
t -= 1
},1000)