I have 6 different options for fonts and I created a button in HTML to call a function onclick. I click it once adn the change works, but when I click it again it does nothing. Definitely missing something and I can”t figure out what it is.
function changeFont() {
var font = "Arial";
var fontNum = 1;
fontNum++;
switch (fontNum) {
case 1:
font = "Josefin Sans";
break;
case 2:
font = "Montserrat";
break;
case 3:
font = "Lora";
break;
case 4:
font = "Suse";
break;
case 5:
font = "Fenix";
break;
case 6:
font = "Courier Prime";
}
document.body.style.fontFamily = font;
if (fontNum >= 6) {
fontNum = 0;
}
}
<input type="button" id="font-toggle" value="Aa" onclick="changeFont()" />
It changes to Montserrat, but nothing after.
Any guidance would be appreciated, thank you.