I wish to change the font-family of a paragraph continuously after every 1 second.. Here is my non-working code...
<!DOCTYPE html>
<html>
<head>
<script src = "jquery.js"> </script>
<script>
$(document).ready(function() {
var idee = document.getElementById('p1');
changeFont();
});
function changeFont()
{
if(idee.style.fontFamily == 'times')
{
idee.style.fontFamily = 'courier';
}
else if(idee.style.fontFamily == 'courier')
{
idee.style.fontFamily = 'times';
}
setTimeout(changeFont, 1000);
}
</script>
</head>
<body>
<p id="p1">This is some text.</p>
</body>
</html>
So.. what am I doing wrong? How to change font conditionally?
I wish to change the font-family of a paragraph continuously after every 1 second.. Here is my non-working code...
<!DOCTYPE html>
<html>
<head>
<script src = "jquery.js"> </script>
<script>
$(document).ready(function() {
var idee = document.getElementById('p1');
changeFont();
});
function changeFont()
{
if(idee.style.fontFamily == 'times')
{
idee.style.fontFamily = 'courier';
}
else if(idee.style.fontFamily == 'courier')
{
idee.style.fontFamily = 'times';
}
setTimeout(changeFont, 1000);
}
</script>
</head>
<body>
<p id="p1">This is some text.</p>
</body>
</html>
So.. what am I doing wrong? How to change font conditionally?
Share Improve this question asked Dec 7, 2012 at 4:39 BLOBBLOB 3742 gold badges7 silver badges21 bronze badges 2- 2 for learning purposes... – BLOB Commented Dec 7, 2012 at 5:16
- no.. Problem solved.. I had to declare the font in paragraph styling before using it in javascript – BLOB Commented Dec 7, 2012 at 5:20
3 Answers
Reset to default 8This code works fine..
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
function changeFont()
{
var idee = document.getElementById("p1").style.fontFamily;
if( idee == 'times')
{
document.getElementById("p1").style.fontFamily = 'courier';
}
else if(idee == 'courier')
{
document.getElementById("p1").style.fontFamily = 'times';
}
var int=setTimeout(function(){changeFont();},1000);
}
</script>
</head>
<body onload=" changeFont();">
<p id="p1" style="font-family: times;">This is some text.</p>
</body>
</html>
you have set var idee in the anonymous function inside the document ready but you're not passing it to changeFont, you're just calling changeFont and hoping that it's there on the global namespace.
try this first:
<!DOCTYPE html>
<html>
<head>
<script src = "jquery.js"> </script>
<script>
$(document).ready(function() {
var idee = document.getElementById('p1');
changeFont(idee);
});
function changeFont(idee)
{
if(idee.style.fontFamily == 'times')
{
idee.style.fontFamily = 'courier';
}
else if(idee.style.fontFamily == 'courier')
{
idee.style.fontFamily = 'times';
}
setTimeout(function() {changeFont(idee)}, 1000);
}
</script>
</head>
<body>
<p id="p1">This is some text.</p>
</body>
</html>
idee is being declared inside the anonymous function.
It will not be visible in changeFont.
<script>
var idee;
$(document).ready(function() {
idee = document.getElementById('p1');
changeFont();
});
AND
setTimeout('changeFont()',1000);