JavaScript Document Code Not Cross Platform - comp.lang.javascript

Message from discussion JavaScript Document Code Not Cross Platform

RobG

View profile

More options May 5 2005, 11:35 pm

Newsgroups: comp.lang.javascript

From: "RobG" <rg...@iinet.net.au>

Date: 5 May 2005 20:35:51 -0700

Local: Thurs, May 5 2005 11:35 pm

Subject: Re: JavaScript Document Code Not Cross Platform

  Reply to author
  |
  Forward
  | Print
  | View thread
  | Show original
  | Report this message
  | Find messages by this author
  

bradwiseath...@hotmail.com wrote:
> I have code that works in IE 6 but does not work in FireFox 1.0.2,
how
> can I change it so it works in both browsers?

Missing DOCTYPE - that has ramifications here (see below), suggest:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

> <html>
> <head>
> <script language="JavaScript" type="text/JavaScript">

The language attribute is depreciated, keep the required type
attribute.

> function AttributeSelected()
> {
> var selectVal =

document.forms['testspit'].elements['lsbRA'].options;

In quirksmode (sans DOCTYPE) IE handles this, Firefox doesn't. If
lsbRA was a single select, then using the above suggested DOCTYPE with:

var selectVal = document.forms['testspit'].elements['lsbRA'];

will fix the issue if 'lsbRA' is a single select - take care, if the
option has no 'value' attribute the value is supposed to be the text,
but IE doesn't understand that.

Adding '.options' on the end returns a collection of the options, which
has no 'value' attribute (it is effectively an array). Removing
'.options' means selectVal will be the element 'lsbRA', whose value
will be that of the selected option.

Since 'lsbRA' is a multiselect, you need to iterate through the options
to find which ones are selected, you can't just get the value. Wrap
your function with a loop that goes through all the options and deals
with the selected ones, so now you have:

var selectVal = document.forms['testspit'].elements['lsbRA'];
for (var i=0, j=selectVal.length; i<j; i++){
if (selectVal[i].selected){
alert(selectVal[i].value + ' selected'); // Purely de-bug...
...

> if (selectVal.value == 'Item1')

becomes:

if (selectVal[i].value == 'Item1')

> {
> document.getElementById('text2').style.visibility='visible';

Here you are using getElementById on elements that have no ID. IE
treats names and IDs as virtually the same thing, Firefox doesn't
(because they are very different things but overlap somewhat in
purpose). ID and NAME share the same namespace, so if you can't have
different elements with the same name & id. You can, in some
circumstances, have the same name on multiple elements.

The quick 'n dirty solution here is to put the same ID on your elements
as the name you've already given them.

> document.getElementById('spnlabel').style.visibility='visible';
> }
> else
> {
> document.getElementById('text2').style.visibility='hidden';
> document.getElementById('spnlabel').style.visibility='hidden';
> }

Add a couple of curly braces to close the added for and if loops.

}
}

> }
> </script>
> </head>
> <body>
> <form name="testspit" method="post" action="">
> <div id="divPlace" style="width:90%;left:10px;top:40px">
> <select multiple id="lsbRA" onChange="AttributeSelected();" >
> <option value="Item1">Item 1</option>
> <option value="Item2">Item 2 </option>
> </select>
> <br/><br/>
> <input name="text1" type="text" value="text1" size="20">

> <br/><br/>
> <span id="spnlabel" style="overflow:hidden">
> -
> </span>
> <span id="spntext" style="overflow:hidden">
> <input name="text2" type="text" value="text2" size="20">

> </span>
> </div>
> </body>
> </html>

> Thanks.

PS. The logic seems strange, but I'll leave that alone... unless it
isn't doing whatever you expect it to. As it is, it may cause
flickering for some users.

--
Rob

Reply to author Forward