如何使用 setinterval 更改多个元素 innerHTML？

Question

我正在开发某个应用程序，我需要为每个元素创建一种倒计时。不幸的是，当我将元素传递给我的函数时，它不起作用。尽管如此，如果我稍微改变一下函数并从 setInterval 中替换元素的 innerHTML ，它就会开始工作。我现在完全没有任何想法。感谢帮助:) const timeout 是元素。

const json_content = json_reader(reserved)
for(x=0;x<json_content["key"].length;x++){
    var 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("elo")
            }
        },
        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)
                    } 
                }   
            }
        })
    }
}

和计数器功能：

function counter(element){
    var t = 10
    setInterval(()=>{
        element.innerHTML = String(t)
        t -= 1
    },1000)

Answer 1

1. 不确定，你在哪里调用计数器函数

<input type="number" id="inp">
<div id="counter"></div>
<script>
let input = document.getElementById('inp')
let counter = document.getElementById('counter')

let handleInput = e => {
	let num = Number(e.target.value)
	let _counter = num - 1
	let timer = setInterval(_ => {
	if(!_counter)
		 clearInterval(timer)
		counter.innerText =  _counter
		_counter--
	}, 1000)
}
input.addEventListener('input', handleInput)
</script>

但是像上面这样的东西应该可以工作。您可以输入 1-9 的数字进行测试。

1. 另一件事是，检查您传递的元素是否真的是您正在寻找的元素。您可能想console.log(element) 并检查一下。

2. 直接更新圆顶不是一个好主意。您可以通过ref 访问dom，或者只使用在data() 中初始化的变量，然后每秒更新一次变量，其余的将由vue 处理

new Vue({
  el: "#app",
  data: {
    timer: 20
  },
  mounted() {
	setInterval(()=> this.timer--, 1000)
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  {{timer}}
</div>