There are errors in your functions, but the first thing you should do, is to set the body tag correctly:
<body>
<p><span id="go" class="georgia">go</span> Italian</p>
<p>
<button id="on" type="button" value="turn on">turn on</button>
<button id="off" type="button" value="turn off">turn off</button>
</p>
</body>
<script>....</script>
The problem sometimes may be, that you call 'var text' and the other vars only once, when the script starts. If you make changements to the DOM, this static solution may be harmful.
So you could try this (this is more flexible approach and using function parameters, so you can call the functions on any element):
<body>
<p><span id="go" class="georgia">go</span> Italian</p>
<p>
<button type="button" value="turn on"
onclick=turnOn("go")>turn on</button>
<button type="button" value="turn off"
onclick=turnOff()>turn off</button>
</p>
</body>
<script type="text/JavaScript">
var interval;
var turnOn = function(elementId){
interval = setInterval(function(){fontChange(elementId);}, 500);
};
var turnOff = function(){
clearInterval(interval);
};
var fontChange = function(elementId) {
var text = document.getElementById(elementId);
switch(text.className) {
case "georgia":
text.className = "arial";
break;
case "arial":
text.className = "courierNew";
break;
case "courierNew":
text.className = "georgia";
break;
}
};
</script>
You don't need this anymore, so delete it:
var text = document.getElementById("go");
var on = document.getElementById("on");
var off = document.getElementById("off");
This is dynamic code, meaning JS code which runs generic and doesn't adress elements directly. I like this approach more than defining an own function for every div element. ;)
