Using onmouseover and setInterval to rapidly change the font family

Question

I want to do this with all the navigation menu links on my site. (I know, it sounds crazy, but I thought I'd give it a try and see if it looks cool) I already have a site that uses css and onhover to change the color of the links in the navigation menu when the mouse hovers over it. But I want to make the font also rapidly change font face until the mouseout event. So, here is the script section that I have in the head section.

<script>
var changeVar;
var font = "Impact";

changeText() {
    if font == "Impact" {
         document.getElementById("tops").style.fontFamily="courier";
         font = "Courier";
    }
    else
         document.getElementById("tops").style.fontFamily="impact";
         font = "Impact";
    }
}
</script>

And here is the navigation link I'm using to test it.

<li><a href="tops.html" id="tops" onmouseover="changeVar=setInterval('changeText()', 10);" onmouseout="clearTimeout(changeVar)">Tops</a></li>

Even though I put that stuff in there, the page does exactly the same thing it did before I put the JavaScript in there. The JavaScript just isn't working at all. Why doesn't it work?

Answer 1

Is this what you are trying to do?

a.navlinkOff {
    font-family: Arial !important;
}
a.navlinkOver1 {
    font-family: Courier !important;
}
a.navlinkOver2 {
    font-family: Impact !important;
}

<a id="navlink1" href="#" class="navlinkOff">Resource 1</a>
<br />
<a id="navlink2" href="#" class="navlinkOff">Resource 2</a>
<br />
<a id="navlink3" href="#" class="navlinkOff">Resource 3</a>
<br />
<a id="navlink4" href="#" class="navlinkOff">Resource 4</a>
<br />
<a id="navlink5" href="#" class="navlinkOff">Resource 5</a>
<br />

var navlinks = document.querySelectorAll("[id^=navlink]");
var delay = 250; // milliseconds
var fired = false;
var id = {};

function defaultClass(evt) {
    evt.target.className = "navlinkOff";
    clearInterval(id[evt.target.id]);
    fired = false;
}

function changeClass(evt) {
    if (evt.target.className === "navlinkOver1") {
        evt.target.className = "navlinkOver2";
    } else {
        evt.target.className = "navlinkOver1";
    }

    if (fired) {
        return;
    }

    fired = true;
    id[evt.target.id] = setInterval(function () {
        changeClass(evt);
    }, delay);
}

Array.prototype.forEach.call(navlinks, function (navlink) {
    navlink.addEventListener("mouseout", defaultClass, false);
    navlink.addEventListener("mouseover", changeClass, false);
});

on jsfiddle