Script is null or not an object

Hi, experts.
I try the following script but browser shows -- document.getElementsByTagName("body")[0].style.fontSize = font_size + "px"; is null or not an object -- How can I fix it ?



 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Q_21154225</title>
<script type="text/javascript">
myPix = new Array("dots/digital1.gif","dots/digital2.gif","dots/digital3.gif","dots/digital4.gif","dots/digital5.gif","dots/digital6.gif","dots/digital7.gif")
thisPic = 3
imgCt = myPix.length -1
var font_size = 14;
var MAX = 17;
var MIN = 11;
function processPrevious(num)
{if (document.images && thisPic > 0) {
thisPic--
document.myPicture.src=myPix[thisPic]
}
}
function processNext(num)
{
if (document.images && thisPic < imgCt) {
thisPic++
document.myPicture.src=myPix[thisPic]
}
}
function adjust_text(num)
{
font_size += num;
if(font_size > MAX)
{
font_size = MAX;
}
if(font_size < MIN)
{
font_size = MIN;
}
document.getElementsByTagName("body")[0].style.fontSize = font_size + "px"; <--- Error
document.getElementById("test").style.fontSize = (font_size - 3) + "px";
}
adjust_text(0);
</script>
</head>
<body onload="adjust_text(0);">
<table width="329" border="0">
<tr>
<td width="117" align="right"><div class="style2">Change font size</div></td>
<td width="48" align="right"><A HREF="javascript:processPrevious(adjust_text(-1))"><IMG SRC="arrows/reverse.gif" width="40" height="20" BORDER=0></a></td>
<td width="98" align="center"><IMG SRC="dots/digital4.gif" NAME="myPicture" width="81" height="20"></td>
<td width="48" align="left"><A HREF="javascript:processNext(adjust_text(1))"><IMG SRC="arrows/forward.gif" width="40" height="20" BORDER=0></a></td>
</tr>
</table>
<p>This is the body text</p>
<p id="test">This is the second body text</p>
<a href="font_change2.html"> 2nd page </a>
</body>
</html>
Brian LinDesignerAsked:
Who is Participating?
 
ColosseoConnect With a Mentor Commented:
Hi

no with that there the code will run before body exists...

you need to remove the adjust_text(0); .... so..

document.getElementsByTagName("body")[0].style.fontSize = font_size + "px";
document.getElementById("test").style.fontSize = (font_size - 3) + "px";
}

because it will be called here...

<body onload="adjust_text(0);">

try this

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Q_21154225</title>
<script type="text/javascript">
myPix = new Array("dots/digital1.gif","dots/digital2.gif","dots/digital3.gif","dots/digital4.gif","dots/digital5.gif","dots/digital6.gif","dots/digital7.gif")
thisPic = 3
imgCt = myPix.length -1
var font_size = 14;
var MAX = 17;
var MIN = 11;
function processPrevious(num)
{if (document.images && thisPic > 0) {
thisPic--
document.myPicture.src=myPix[thisPic]
}
}
function processNext(num)
{
if (document.images && thisPic < imgCt) {
thisPic++
document.myPicture.src=myPix[thisPic]
}
}
function adjust_text(num)
{
font_size += num;
if(font_size > MAX)
{
font_size = MAX;
}
if(font_size < MIN)
{
font_size = MIN;
}
document.getElementsByTagName("body")[0].style.fontSize = font_size + "px";
document.getElementById("test").style.fontSize = (font_size - 3) + "px";
}
</script>
</head>
<body onload="adjust_text(0);">
<table width="329" border="0">
<tr>
<td width="117" align="right"><div class="style2">Change font size</div></td>
<td width="48" align="right"><A HREF="javascript:processPrevious(adjust_text(-1))"><IMG SRC="arrows/reverse.gif" width="40" height="20" BORDER=0></a></td>
<td width="98" align="center"><IMG SRC="dots/digital4.gif" NAME="myPicture" width="81" height="20"></td>
<td width="48" align="left"><A HREF="javascript:processNext(adjust_text(1))"><IMG SRC="arrows/forward.gif" width="40" height="20" BORDER=0></a></td>
</tr>
</table>
<p>This is the body text</p>
<p id="test">This is the second body text</p>
<a href="font_change2.html"> 2nd page </a>
</body>
</html>

Scott
0
 
ColosseoCommented:
Hi

right at the end of your script section you call

adjust_text(0);

This is trying to run before the page loads hence before body exists

If you remove this line it will be called by the onload you already have on your body tag

HTH

Scott
0
 
Brian LinDesignerAuthor Commented:
yes, i did....

document.getElementsByTagName("body")[0].style.fontSize = font_size + "px"; <--- Error
document.getElementById("test").style.fontSize = (font_size - 3) + "px";
}
adjust_text(0); <-- is this right ?
0
 
Brian LinDesignerAuthor Commented:
thanks so much !!
0
 
ColosseoCommented:
Your welcome and thanks for the grade

Cheers

Scott
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.