Problems calling a function

J

JS

I have made a function createFirstMenu where I call "resetMenu" in a
JavaScript. But nothing happens when I call resetMenu.

function createFirstMenu(sel){
sel = document.getElementById('sel1');
resetMenu(sel);
}

function resetMenu(sel){
sel.length = 0;
opt = document.createElement('OPTION');
sel.appendChild(opt);
opt.value = "";
opt.text = "-- Choose--";
}



This is the form where I call createFirstMenu when the page loads.

<body onload="createFirstMenu('sel1');">
<form name="sels" method="post" action="">
<select name="sel1" id="sel1" onchange="createSecondMenu('sel1','sel2');">
</select>

<select name="sel2" id="sel2" onchange="createThirdMenu('sel1','sel2',
'sel3');">
<option value="">-- V&aelig;lg --</option>
</select>

<select name="sel3" id="sel3">
<option value="">--V&aelig;lg--</option>
</select>

<input name="search" type="text" id="search">
&nbsp;
<input type="submit" name="Submit" value="Søg">
</form>



Hope someone can help!
 
J

JS

Again it was because I overlooked an "{". I have wasted quite some hours on
these syntax errors by now. I use Dreamweaver and for some reason this
program don't have any syntax check (like eclipse) for javascript or JSP.

Hopefully there are some better programs to write these things in, because
syntax correction are one of the most basic features that a program should
have. Any recommendations??
 
E

Evertjan.

JS wrote on 30 mei 2005 in comp.lang.javascript:
function createFirstMenu(sel){
sel = document.getElementById('sel1');
resetMenu(sel);
}
Click to expand...

Not that it matters,
but why enter a parameter in the local variable

sel

--- function createFirstMenu(sel){

and then immediately changing the content to

document.getElementById('sel1');

--- sel = document.getElementById('sel1');

?
 
R

RobG

JS said:
Again it was because I overlooked an "{". I have wasted quite some hours on
these syntax errors by now. I use Dreamweaver and for some reason this
program don't have any syntax check (like eclipse) for javascript or JSP.

Hopefully there are some better programs to write these things in, because
syntax correction are one of the most basic features that a program should
have. Any recommendations??
Click to expand...

Firefox's JavaScript console is very helpful for syntax errors, usually
providing a line number and giving a link to the source so you can
easily fix them.

For more serious stuff there's Mozilla's JavaScript debugger 'Venkman'

<URL:http://www.mozilla.org/projects/venkman/>

And Douglas Crockford's JavaScript verifier 'JSLint':

<URL:http://www.crockford.com/javascript/lint.html>


Other Firefox developer tools (including extensions to the JavaScript
console, HTML, CSS and RSS tools):


<URL:https://addons.mozilla.org/extensions/showlist.php?application=firefox&category=Developer Tools>

Have fun.
 
J

JS

Evertjan. said:
JS wrote on 30 mei 2005 in comp.lang.javascript:


Not that it matters,
but why enter a parameter in the local variable

sel

--- function createFirstMenu(sel){

and then immediately changing the content to

document.getElementById('sel1');

--- sel = document.getElementById('sel1');

?
Click to expand...

I have this form:


<body onload="createFirstMenu('sel1');">
<form name="sels" method="post" action="?page=jubii">
Kategori:&nbsp;&nbsp;&nbsp;
<select name="sel1" id="sel1" onchange="createSecondMenu('sel1','sel2',
'sel3');">
</select>
....
..
..
..

But for some reason I don't get access to sel1 in createFirstMenu if I don't
explicitly grap it with:

sel = document.getElementById('sel1');

Guess I am missing something?
 
Z

Zif

JS said:
I have this form:


<body onload="createFirstMenu('sel1');">
<form name="sels" method="post" action="?page=jubii">
Kategori:&nbsp;&nbsp;&nbsp;
<select name="sel1" id="sel1" onchange="createSecondMenu('sel1','sel2',
'sel3');">
</select>
...
.
.
.

But for some reason I don't get access to sel1 in createFirstMenu if I don't
explicitly grap it with:

sel = document.getElementById('sel1');

Guess I am missing something?
Click to expand...

The local variable 'sel' is created here:

function createFirstMenu(sel){

It is passed the string 'sel1' from the onload event:

<body onload="createFirstMenu('sel1');">

The content of 'sel' is replaced with a reference to the element
with id 'sel1' using a hard-coded parameter:

sel = document.getElementById('sel1');

which seems to ignore the value passed to sel in the first place. To
re-use the local variable 'sel', then:

sel = document.getElementById(sel);

would make more sense, but probably better would be to use the forms
collection and reduce reliance on getElementById (although it is
supported by perhaps 95% of browsers in use):

sel = document.forms['sels'].elements[sel];

or a reference to the required element could be passed directly from
the onload event:

<body onload="
createFirstMenu(document.forms['sels'].elements['sel1']);
">

Thereby removing the hard-coded values from the script. Having gone
that far, the usefulness of createFirstMenu() becomes moot, since all
it does is call resetMenu() - the onload is effectively:

<body onload="
resetMenu(document.forms['sels'].elements['sel1']);
">

The resetMenu() function is:

function resetMenu(sel){
sel.length = 0;
opt = document.createElement('OPTION');
sel.appendChild(opt);
opt.value = "";
opt.text = "-- Choose--";
}

When modifying the length of the select to change the number of
options, it seems appropriate to set it to the new length directly:

sel.length = 1;

and then modify the remaining option(s):

sel[0].value = "";
sel[0].text = "-- Choose--";

so now you have:

function resetMenu(sel){
sel.length = 1;
sel[0].value = "";
sel[0].text = "-- Choose--";
}

If there are many option attributes to modify, it may be better
(faster) to create a local variable with a reference to the option:

function resetMenu(sel){
sel.length = 1;
var s = sel[0];
s.value = "";
s.text = "-- Choose--";
//...
}
 
R

Random

Zif said:
JS wrote:
[...]
Hopefully there are some better programs to write these things in, because
syntax correction are one of the most basic features that a program should
have. Any recommendations??
Click to expand...

<URL:http://www.editplus.com/>

Gets my vote.
Click to expand...

Aside from vi/vim, EditPlus is my only text editor.
Never heard anyone else mention it but it's the best I've seen.
 
J

JS

I am still confused about the way arguments are passed. In my test.jsp page
I have:


<body onload="createFirstMenu('sel1');">
<form name="sels" method="post" action="?page=jubii">
Kategori:&nbsp;&nbsp;&nbsp;
<select name="sel1" id="sel1" onchange="createSecondMenu('sel1','sel2',
'sel3');">
</select>
&nbsp;&nbsp;&nbsp;&nbsp;Kriterium:&nbsp;&nbsp;
<select name="sel2" id="sel2" onchange="createThirdMenu('sel1','sel2',
'sel3');">
<option value="0">-- V&aelig;lg --</option>
</select>
</form>



And in my JavaScript I have:

function createFirstMenu(sel){
sel = document.getElementById(arguments[0]);

for(i=0;entry.length>i;i++){
opt = document.createElement('OPTION');
sel.appendChild(opt);
opt.value = i+1;
opt.text = entry[0];
}
}


If I call createFirstmenu with "sel2" nothing changes:

<body onload="createFirstMenu('sel2');">
....
....
....

For some reason it does not matter which argument I give createFirstMenu in
test.jsp. I have even tried:

<body onload="createFirstMenu('bla');">

and the first menu still gets vreated as it should. What am I missing?
 
L

Lee

JS said:
I am still confused about the way arguments are passed. In my test.jsp page
I have:


<body onload="createFirstMenu('sel1');">
<form name="sels" method="post" action="?page=jubii">
Kategori:&nbsp;&nbsp;&nbsp;
<select name="sel1" id="sel1" onchange="createSecondMenu('sel1','sel2',
'sel3');">
</select>
&nbsp;&nbsp;&nbsp;&nbsp;Kriterium:&nbsp;&nbsp;
<select name="sel2" id="sel2" onchange="createThirdMenu('sel1','sel2',
'sel3');">
<option value="0">-- V&aelig;lg --</option>
</select>
</form>



And in my JavaScript I have:

function createFirstMenu(sel){
sel = document.getElementById(arguments[0]);
Click to expand...

Why do you do that? There's no need to use the arguments array
unless you don't know how many arguments you need to handle.

function createFirstMenu(selID) {
var sel = document.getElementById(selID);

should be easier to understand.

However, you could simplify it even further by passing a
reference to the Select object in the first place, so you
don't need to look it up by ID value:

onload="createFirstMenu(document.sels.sel1)"
 
J

JS

<body onload="
createFirstMenu(document.forms['sels'].elements['sel1']);
">

Thereby removing the hard-coded values from the script. Having gone
that far, the usefulness of createFirstMenu() becomes moot, since all
it does is call resetMenu() - the onload is effectively:

<body onload="
resetMenu(document.forms['sels'].elements['sel1']);
">

The resetMenu() function is:

function resetMenu(sel){
sel.length = 0;
opt = document.createElement('OPTION');
sel.appendChild(opt);
opt.value = "";
opt.text = "-- Choose--";
}
Click to expand...


Now I have:

<body onload="createFirstMenu('sel1');">

and in my script I just have:

function createFirstMenu(sel){
resetMenu(sel);
....
.....
....
....
}

And there is no need to use document.getElementById(arguments[0]);

And it seems to work fine. I don't see any reason to make the call:


<body onload="
createFirstMenu(document.forms['sels'].elements['sel1']);">


it works fine when I just type:

<body onload="createFirstMenu('sel1');">
 
R

RobG

JS wrote:
[...]
Now I have:

<body onload="createFirstMenu('sel1');">

and in my script I just have:

function createFirstMenu(sel){
resetMenu(sel); [...]

And there is no need to use document.getElementById(arguments[0]);
Click to expand...

That was never suggested, it was your invention and it's a bad idea.
And it seems to work fine. I don't see any reason to make the call:
Click to expand...

Looks can be deceiving, see below.
<body onload="
createFirstMenu(document.forms['sels'].elements['sel1']);">
Click to expand...

Because that is standards-compliant and will work reliably in a greater
range of browsers than your IE-centric alternative.
it works fine when I just type:

<body onload="createFirstMenu('sel1');">
Click to expand...

Using element names & ID's as global variables has very limited support
outside Internet Explorer [1].

Please read the above posts thoroughly, you have been provided with a
detailed explanation of what you should be doing. Continually posting
garbage that ignores advice provided will cause most here to ignore
you.

[1] Noted that the Mozilla project has bowed under the weight of
non-W3C compliant sites to some extent and allows names and IDs to
be accessed as global variables in quirksmode.

<URL:https://bugzilla.mozilla.org/show_bug.cgi?id=256932>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Multiple arguments to a function?? 1
jQuery problem 10
"onload" method 2
Print content on same page?? 0
problem with dynamic select 0
HCaptcha - How to stop page from refreshing on submit if captcha is not checked/validated 1
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
How to display input options only after selecting an option from the 'select class' tag JS? 6

Members online

Total: 42 (members: 2, guests: 40)
Robots: 122

Forum statistics

Threads
473,773
Messages
2,569,594
Members
45,113
Latest member
Vinay KumarNevatia

Latest Threads

Top