Как изменить несколько элементов внутри HTML, используя setinterval?

Question

Я работаю над определенным приложением, и мне нужно создать вид обратного отсчета для каждого элемента. К сожалению, когда я передаю элемент в мою функцию, он не работает. Тем не менее, если я немного изменю функцию и просто заменю внутреннюю HTML элемента из setInterval, он начинает работать. Я совершенно не догадываюсь сейчас. Признаться за помощь

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 для проверки.

Другое дело, проверьте, является ли элемент, который вы передаете, действительно элементом, который вы ищете. Вы можете console.log(element) и проверить.

Непосредственное обновление купола не очень хорошая идея. Вы можете получить доступ к dom через ref или просто использовать переменную, инициализированную в 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>