I'm very new to JS, I have a problem that could easily be solved I think but I can't figure it out :
I would like to find a way to change the font-family of an html element every 0.1 seconds without having to trigger something.
Basically I would like the html element to change font every 0.1 sec, rotating amongst 6 font families.
really thankful if you guys can find a way.
Louis
Try something like :
function changefontFamily() {
var doc = document.getElementById("elementID");
var font= ["Arial", "Verdana", "Helvetica ", "Tahoma"];
doc.style.fontFamily= font[i];
i = (i + 1) % font.length;
}
setInterval(changefontFamily, 100);
<div id="elementID">text</div>
I set 1 second (1000 ms), for clarity, because 100ms is too fast 🙂
(async()=>{
const elem = document.getElementById('elementID');
const fonts = ['Arial', 'Tahoma', 'Verdana'];
let k = fonts.length;
setInterval(()=>{
k--;
elem.style.fontFamily = fonts[k];
console.log('Now:', fonts[k], k);
if(k === 0)k = fonts.length;
}, 1000);
})();<div id="elementID">Some Text to test it OUT</div>