Any forseeable problems with this code?

[Shawn Modersohn]

For the script:

<script language="JavaS cript">
function pullPage(){
var arrayLength=doc ument.teamSelec tionF.teamSelec tionS.length;
var pageNav = new Array(arrayLeng th);
var
gotoNum=documen t.teamSelection F.teamSelection S.options[document.teamSe lectionF.teamSe lectionS.select edIndex].value;
pageNav["null"]="http://www.tandtsports .com";
pageNav["Cougars"]="http://www.tandtsports .com/Cougars.html";
pageNav["Mavericks"]="http://www.tandtsports .com/Mavericks.html" ;
pageNav["Shortcuts"]="http://www.tandtsports .com/Shortcuts.html" ;
window.open(pag eNav[gotoNum]);
}
</script>

And in the body:
<form name="teamSelec tionF">Please Select A team:
<select name="teamSelec tionS" size="1"onChang e="pullPage() " >
<option value="null" selected>Team_N ame</option>
<option value="Cougars" >Cougars</option>
<option value="Maverick s">Mavericks </option>
<option value="Shortcut s">Shortcuts </option>
</select>
</form>

The intent is to produce a function whereby all I have to do create a
new pageNav array member that will naturally have an index value the
same as option value. I believe this will make maintaining a team list
much easier with the array usage within the window.open method. I was
working on this a few weeks ago and posted a message based on this
code. It works fine with the most recent IE and Netscape, but someone
emailed me and warned me of potential problem. I guess I deleted that
email so I was wondering if anyone could point out any potential
problems.

[Joakim Braun]

Re: Any forseeable problems with this code?

"Shawn Modersohn" <smmodersohn@ho tmail.com> skrev i meddelandet
news:St1Rc.2540 $qw6.549@newssv r24.news.prodig y.com...[color=blue]
> For the script:
>
> <script language="JavaS cript">
> function pullPage(){
> var arrayLength=doc ument.teamSelec tionF.teamSelec tionS.length;
> var pageNav = new Array(arrayLeng th);
> var
>[/color]
gotoNum=documen t.teamSelection F.teamSelection S.options[document.teamSe lectio
nF.teamSelectio nS.selectedInde x].value;

<snip>

What if document.teamSe lectionF.teamSe lectionS.select edIndex is -1?

Joakim Braun

[Lasse Reichstein Nielsen]

Re: Any forseeable problems with this code?

Shawn Modersohn <smmodersohn@ho tmail.com> writes:
[color=blue]
> For the script:
>
> <script language="JavaS cript">[/color]

Should be
<script type="text/javascript">
if you want the page to validate.
[color=blue]
> function pullPage(){[/color]

Since this function is called by the select element itself, it can
just have the select element passed to it.

function pullPage(select Elem) {
[color=blue]
> var arrayLength=doc ument.teamSelec tionF.teamSelec tionS.length;[/color]

A little indentation would make it much easier to read.
You don't need this length.
[color=blue]
> var pageNav = new Array(arrayLeng th);[/color]

.... line moved below ...

You create an array with a specific length. That's rarely needed in
Javascript, since the length is updated dynamically anyway.
[color=blue]
> pageNav["null"]="http://www.tandtsports .com";
> pageNav["Cougars"]="http://www.tandtsports .com/Cougars.html";
> pageNav["Mavericks"]="http://www.tandtsports .com/Mavericks.html" ;
> pageNav["Shortcuts"]="http://www.tandtsports .com/Shortcuts.html" ;[/color]

You don't use the Array'ness of pageNav, since you don't use integer
indices. All thous could be written:

var pageNav = new Object();
pageNav["null"] = ...;
...
pageNav["Shortcuts"] = ...;

No need for the length or an Array.
[color=blue]
> var gotoNum=documen t.teamSelection F.teamSelection S.options[document.teamSe lectionF.teamSe lectionS.select edIndex].value;[/color]

If you have the select element available, this becomes:
var gotoName = selectElem.opti ons[selectElem.sele ctedIndex].value;
That requires that something is selected, but it should be after an
onChange event.
[color=blue]
> window.open(pag eNav[gotoNum]);[/color]

Opening new windows is not very reliable any more. Popup-blockers are
becoming ubiquitous. Also, depending on Javascript for navigation will
fail for people with Javascript disabled.
[color=blue]
> }
> </script>
>
> And in the body:
> <form name="teamSelec tionF">Please Select A team:
> <select name="teamSelec tionS" size="1"onChang e="pullPage() " >[/color]

Missing space between "size" and "onchange" event handlers.
Change onchange to:
onchange="pullP age(this);"
to pass the select directly to the function.

[color=blue]
> <option value="null" selected>Team_N ame</option>
> <option value="Cougars" >Cougars</option>
> <option value="Maverick s">Mavericks </option>
> <option value="Shortcut s">Shortcuts </option>[/color]

Why not, e.g.,
<option value="http://www.tandtsports .com/Shortcuts.html" >Shortcuts</option>
Then you don't need the lookup table at all, but can go directly to the
value.
[color=blue]
> I believe this will make maintaining a team list much easier with
> the array usage within the window.open method.[/color]

The "array" is always the same, so it would make sense to create it
outside the function, instead of creating a new one every time. However,
I doubt efficiency is a problem here.
[color=blue]
> I was working on this a few weeks ago and posted a message based on
> this code. It works fine with the most recent IE and Netscape, but
> someone emailed me and warned me of potential problem. I guess I
> deleted that email so I was wondering if anyone could point out any
> potential problems.[/color]

People navigating with keyboard can't use the arrow keys to select
the team (at least withouth opening a new window for every press
on the down key). It's better to hava a "go" button next to the
select.

The solution depends on Javascript, and fails completely in its absence.

The solution depends on window.open and might fail in the presence
of a popup blocker.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

[Michael Winter]

Re: Any forseeable problems with this code?

On Sat, 07 Aug 2004 09:42:10 GMT, Shawn Modersohn
<smmodersohn@ho tmail.com> wrote:

I do see two issues (though now exactly problems), but I'll start
with general improvements first.
[color=blue]
> For the script:
>
> <script language="JavaS cript">[/color]

Valid HTML requires the type attribute. This attribute completely
replaces the deprecated language attribute:

<script type="text/javascript">
[color=blue]
> function pullPage(){
> var arrayLength=doc ument.teamSelec tionF.teamSelec tionS.length;
> var pageNav = new Array(arrayLeng th);[/color]

What you use below isn't actually an array. Arrays use ordinals,
whereas you use names. All you actually need is an object.
Furthermore, as you don't actually use any methods or properties
exposed by an Array object, why add the extra (though granted,
insignificant) overhead? Replace the two lines above with:

var pageNav = new Object();
[color=blue]
> var
> gotoNum=documen t.teamSelection F.teamSelection S.options[document.teamSe lectionF.teamSe lectionS.select edIndex].value;[/color]

This can be greatly simplified by saving a reference to the element:

var element = document.forms['teamSelectionF '
].elements['teamSelectionS '];
var gotoNum = element.options[element.selecte dIndex].value;

By the way, gotoNum is a misnomer, isn't it?
[color=blue]
> pageNav["null"]="http://www.tandtsports .com";
> pageNav["Cougars"]="http://www.tandtsports .com/Cougars.html";
> pageNav["Mavericks"]="http://www.tandtsports .com/Mavericks.html" ;
> pageNav["Shortcuts"]="http://www.tandtsports .com/Shortcuts.html" ;
> window.open(pag eNav[gotoNum]);[/color]

You could simplify that to:

pageNav['null'] = '';
pageNav['Cougars'] = 'Cougars.html';
pageNav['Mavericks'] = 'Mavericks.html ';
pageNav['Shortcuts'] = 'Shortcuts.html ';
window.open('ht tp://www.tandtsports .com/' + pageNav[gotoNum]);

[snip]
[color=blue]
> And in the body:
> <form name="teamSelec tionF">Please Select A team:
> <select name="teamSelec tionS" size="1"onChang e="pullPage() " >[/color]

There should be a space between the quotes and the next attribute.
Also, there is no need to use an uppercase 'C' with 'Change'
(likewise with other intrinsic events).

[snip]

The first issue is that this approach makes your site inaccessible to
users with JavaScript disabled.

The second issue is that you're changing the behaviour of the SELECT
element. It is meant to select options, not perform actions.

There are several ways of using a SELECT element: with a mouse click,
a mouse wheel, and the keyboard. The latter two fire constant
onchange events, making them unusable options with your code.
Moreover, even the former has problems - what if the user makes a
mistake? The user will have to close your window and reselect, and
from personal experience, I can tell you that's *extremely* annoying
(and the new window is bad enough).

The best approach will avoid new windows, and use a button to choose
the destination (preferably done on the server).

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail

[Michael Winter]

Re: Any forseeable problems with this code?

On Sat, 7 Aug 2004 11:44:57 +0200, Joakim Braun
<joakim.braun@j fbraun.removeth is.com> wrote:

[snip]
[color=blue]
> What if document.teamSe lectionF.teamSe lectionS.select edIndex is -1?[/color]

I don't think that would be possible. A value is selected by default (in
the HTML), so the value should always be >=0 as you can't remove the
selection (can you??).

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail

[Shawn Modersohn]

Re: Any forseeable problems with this code?



Shawn Modersohn wrote:[color=blue]
> For the script:
>
> <script language="JavaS cript">
> function pullPage(){
> var arrayLength=doc ument.teamSelec tionF.teamSelec tionS.length;
> var pageNav = new Array(arrayLeng th);
> var
> gotoNum=documen t.teamSelection F.teamSelection S.options[document.teamSe lectionF.teamSe lectionS.select edIndex].value;
>
> pageNav["null"]="http://www.tandtsports .com";
> pageNav["Cougars"]="http://www.tandtsports .com/Cougars.html";
> pageNav["Mavericks"]="http://www.tandtsports .com/Mavericks.html" ;
> pageNav["Shortcuts"]="http://www.tandtsports .com/Shortcuts.html" ;
> window.open(pag eNav[gotoNum]);
> }
> </script>
>
> And in the body:
> <form name="teamSelec tionF">Please Select A team:
> <select name="teamSelec tionS" size="1"onChang e="pullPage() " >
> <option value="null" selected>Team_N ame</option>
> <option value="Cougars" >Cougars</option>
> <option value="Maverick s">Mavericks </option>
> <option value="Shortcut s">Shortcuts </option>
> </select>
> </form>
>
> The intent is to produce a function whereby all I have to do create a
> new pageNav array member that will naturally have an index value the
> same as option value. I believe this will make maintaining a team list
> much easier with the array usage within the window.open method. I was
> working on this a few weeks ago and posted a message based on this
> code. It works fine with the most recent IE and Netscape, but someone
> emailed me and warned me of potential problem. I guess I deleted that
> email so I was wondering if anyone could point out any potential problems.
>[/color]
Thanks for the replies. I am biding my time with about 1500 pages of
tutorial right now so some of the intent of this code is purely academic
anyway. Very helpful comments.