Cross Browser Netscape 7.1 not working [Archive]

Langgaard

06-03-2004, 01:01 AM

Hi,

I am new to JavaScript and am doing some exercises to come to grips with it. I have been trying to programme the script below so that it will work in Netscape Browser 7.1, 4.73 and Microsoft Internet Explorer; but without success. When I attempt to execute the function flyingsleigh() I receive a JavaScript error: Invalid argument at line:19 Char:7 The idea of this script is to make a graphic run across the browser screen - left to right when the form button is pressed, executing the function using onClick event handler.

Could someone please assist me ? :)

Many thanks,

Robin, New Zealand

My code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<style type="text/css">

</style>
<title>Cross Browser</title>
<script type="text/javascript">

</script>
</head>
<body bgcolor="#ffffff">
<DIV ID="reindeer"><img src="sleigh.gif">
</DIV>
<FORM>
<INPUT TYPE="button" VALUE="Fly Reindeer" onClick="flyingsleigh()">
<P></P>

</FORM>
</body>
</html>

glenngv

06-03-2004, 03:33 AM

The left property is not a pure number, it also includes a unit (e.g. 10px)

if (document.getElementById) // Netscape 6+, IE5+, Moz, and other modern browsers
{
var r = document.getElementById('reindeer');
r.style.left = parseInt(r.style.left) + 5 + "px";

if (parseInt(r.style.left) > 800)
{
r.style.left = "-100px";
}
spot=setTimeout("flyingsleigh()",50)
}
...

Langgaard

06-04-2004, 06:23 AM

Hi Glenn,

Many thanks for your help. :) I am still receiving a JS error “Invalid argument” at line 19: Char: 6 when I try to execute the function. :confused: When I REM out the 7.1 section ( /* */ ) of the script, the Netscape 4.73 and Microsoft Explorer part of it works fine. :) I have these browsers on my system to test the scripts. The script you gave also gives the Invalid argument message. What does Invalid argument mean and how can I deal with it in future ?? The invalid argument happens in Explorer browser and the none of the scripts will work at all until I omit the 7.1 section or REM it out as explained.

Thanks.

Robin.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<style type="text/css">

</style>
<title>Cross Browser</title>
<script type="text/javascript">

</script>
</head>
<body bgcolor="#ffffff">
<DIV ID="reindeer"><img src="sleigh.gif">
</DIV>
<FORM>
<INPUT TYPE="button" VALUE="Fly Reindeer" onClick="flyingsleigh()">
<P></P>

</FORM>
</body>
</html>

glenngv

06-04-2004, 07:28 AM

You're still using your original code. Did you try mine?

Invalid argument means you supply a wrong value for an attribute.

This is where the error goes:

document.getElementById('reindeer').style.left += 5;

If you expand this, it would look like this:

document.getElementById('reindeer').style.left = "10px" + 5;

Since "10px" is a string and not a number, string concatenation occurs not addition. This is the final output where the error exactly occurs:

document.getElementById('reindeer').style.left = "10px5";

You should parseInt() the value to convert it to number as I did in my previous post.

Langgaard

06-04-2004, 12:45 PM

Hi Glenn,

Yes, I did try your code and I received the same error. Below is the revised code that still has a JS error “Invalid argument” that occurs at line:19 Char 6 thus:
document.getElementById('reindeer').style.left = "10px" + 5; when I attempt to execute the function.

I am sorry if I seem a bit “dumb”, but I am still coming to grips with the coding. I understand parseInt() and what it does, but I find applying these tools so that they actually work a real challenge. I have got Danny Goodman’ JavaScript Bible (4th Edition) as a reference.

I am very determined to get on top of this cross-browser scripting.

I appreciate your help and I hope you may continue to bear with me until I have mastered this. :)

Best wishes,

Robin.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<style type="text/css">

</style>
<title>Cross Browser</title>
<script type="text/javascript">

</script>
</head>
<body bgcolor="#ffffff">
<DIV ID="reindeer"><img src="sleigh.gif">
</DIV>
<FORM>
<INPUT TYPE="button" VALUE="Fly Reindeer" onClick="flyingsleigh()">
<P></P>

</FORM>
</body>
</html>

glenngv

06-07-2004, 04:11 AM

You're still using your original code. Did you try mine?

Invalid argument means you supply a wrong value for an attribute.

This is where the error goes:

document.getElementById('reindeer').style.left += 5;

If you expand this, it would look like this:

document.getElementById('reindeer').style.left = "10px" + 5;

Since "10px" is a string and not a number, string concatenation occurs not addition. This is the final output where the error exactly occurs:

document.getElementById('reindeer').style.left = "10px5";

You should parseInt() the value to convert it to number as I did in my previous post.
I demonstrated to you what "invalid argument" means, not to follow it but why did you do what shouldn't be done? :rolleyes:

Just use my original suggestion:

if (document.getElementById) // Netscape 6+, IE5+, Moz, and other modern browsers
{
var r = document.getElementById('reindeer');
r.style.left = parseInt(r.style.left) + 5 + "px";

if (parseInt(r.style.left) > 800)
{
r.style.left = "-100px";
}
spot=setTimeout("flyingsleigh()",50)
}
...

fredmv

06-07-2004, 04:13 AM

Though I think you only need to explictly define the units while the browser is running under standards-compliance mode. In quirks mode they are optional, though it is definitely good practice to specify the exact unit you'd like to increase script portability and overall quality.

liorean

06-07-2004, 04:38 AM

You should never count on non-standard code to work. I don't think it's too far fetched to believe there will appear browsers in the future that only have one rendering mode - standards mode.

fredmv

06-07-2004, 04:41 AM

Totally agree. I personally never leave out the units, but I just figured that might be worth mentioning.