[Vuejs]-How to change multiple elements innerHTML using setinterval?

by

0👍

  1. Not sure, where are you calling the counter function
<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>

But something like above should work. You can input numbers from 1-9 to test.

  1. Another thing is, check if the element you are passing is actually the element you aare looking for. You might want to console.log(element) and check.

  2. Directly updating dome is not a very good idea. You can access the dom via ref or just use a variable initialized in data() and just update the variable every second, rest will be taken care of by 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>

Leave a comment