Changing text on timer from data attr
by Vallek
HTML
<h1 class="heading"
data-key-word="CSS HTML JS">
Welcome to <span class="word" role="status">CSS</span>
</h1>
CSS
.word {
color: crimson;
}
JavaScript
let changingText = document.querySelector('.word');
let elem = document.querySelector('.heading');
let words = elem.dataset.keyWord;
let wordsAr = words.split(' ');
let ar = Array.from(wordsAr);
function changingTextLoop() {
let i = 0;
setInterval(() => {
changingText.innerHTML = ar[i++];
if (i >= ar.length) i = 0;
}, 1000);
}
changingTextLoop();