это наверное то, что вы хотите. Вы можете легко расширить этот код, если поймете, как он работает. Я добавил комментарии, чтобы вы могли это понять.
Если это помогло вам, пожалуйста, утвердите это в качестве ответа.
; // This is a javascript object used as a hashmap
var changeList = {
"one": "two",
"two": "three",
"three": "four",
"four": "five",
"five": "six",
"six": "seven",
"seven": "eight",
"eight": "nine",
// ...
}
function _changeText() {
let els = document.querySelectorAll('.word-changer');
//iterate over all .word-changer elements
for (let i = 0; i < els.length; i++) {
let el = els[i];
// read out elements data-counter and data-max attributes
let counter = parseInt(el.dataset.counter);
let max = parseInt(el.dataset.max);
if(counter < max ) {
// Update counter and replace word based on the "hashmap"
counter++;
el.innerHTML = changeList[el.textContent]; // This is where the words get swapped
el.dataset.counter = counter;
}
}
}
setInterval(_changeText, 3000);
<h4>
Count to <span class="word-changer" data-counter="0" data-max="2">one</span> and <span class="word-changer" data-counter="0" data-max="2">four</span> and <span class="word-changer" data-counter="0" data-max="2">six</span>.
</h4>