Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

dynamic event handlers in firefox

Status
Not open for further replies.
jitteman

jitteman

Programmer
Apr 20, 2008
4
US
The following script dynamically creates a select list and moves options you create between created select-boxes.
My problem is with the dynamically assigned onfocus event handler. In IE the boxnumber variable is changed and the moveright function changes which select-box options it appends.
However in Firefox when the onfocus event handler is assigned the moveright() function does nothing. The test() function is in the script to see if the onfocus event handler reassigns the boxnumber variable; and it does.

*The script is rather long, but it seems like the question wouldn't make any sense without the whole thing.

**To make it really clear what my problem is do the following in IE and firefox:
//Save the script as an HTML file and open it. Add two items, move the first one right and then click the first box and try to move that item right.//



<HTML>
<HEAD>
<TITLE>UPDATINGS NOW</TITLE>
</HEAD>
<BODY>
<SCRIPT language="Javascript">
var newoption; var newtext; var boxnumber=0; var boxname=0;
function additem(){
with(document){
newoption = createElement("OPTION");
newtext = createTextNode(f1.t1.value);}
newoption.appendChild(newtext);
document.selectform.elements[0].appendChild(newoption);
}
function createlist(){
newlist= document.createElement("SELECT");
newlist.size=5;
newlist.name=boxname;
newlist.onfocus = function() { boxnumber = this.name; };
document.selectform.appendChild(newlist);
boxname++;
}
function moveitemright(){
with(document.selectform){
elements[boxnumber+1].appendChild(elements[boxnumber]
.options[elements[boxnumber].selectedIndex]);}
boxnumber++;
return boxnumber;
}
function moveitemleft(){
with(document.selectform){
elements[boxnumber-1].appendChild(elements[boxnumber]
.options[elements[boxnumber].selectedIndex]);}
boxnumber--;
}
function test(){
document.f1.t1.value=boxnumber;
}
</SCRIPT>
<FORM name="f1">
<INPUT type=text name="t1">
<INPUT type=button value="additem" onClick="additem()">
<INPUT type=button value="<<" onClick="moveitemleft()">
<INPUT type=button value=">>" onClick="moveitemright()">
<INPUT type=button value="createlist" onClick="createlist()">
<INPUT type=button value="test" onclick="test()">
</FORM>
<FORM name="selectform"></FORM>
</BODY>
</HTML>


 
Sort by date Sort by votes
I have taken a look at your script. I see two major problems.

[1] When you create a select-one element dynamically, you have taken into account a special feature of ie that prohibit assignment of name attribute in the normal format one usually applies. (See the revision script.)

[2] When you assigne name to the elements, a numeric type would be ill-advised. Changes are it would not be resolved properly, being undistinguishable from indexing scheme. Hence, it should be given at least an alphabet prefix. (See the revision script.)

[3] Here is the minimal revision practically line for line as I read along with it.
[tt]
<HTML>
<HEAD>
<TITLE>UPDATINGS NOW</TITLE>
</HEAD>
<BODY>
<SCRIPT language="Javascript">
var newoption; var newtext; var boxnumber=0; var boxname=0;
[red]var prefix="x";[/red]
function additem(){
with(document){
newoption = createElement("OPTION");
newtext = createTextNode(f1.t1.value);}
[red]newoption.value=f1.t1.value;[/red]
newoption.appendChild(newtext);
document.selectform.elements[[red]prefix+[/red]0].appendChild(newoption);
}
function createlist(){
[red]try {
newlist=document.createElement("<select name='"+prefix+boxname+"' size='5'></select>");
} catch() {[/red]
newlist= document.createElement("SELECT");
newlist.size=5;
newlist.name=[red]prefix+[/red]boxname;
[red]}[/red]
newlist.onfocus = function() { boxnumber = [red]parseInt(this.name.substr(prefix.length),10);[/red] };
document.selectform.appendChild(newlist);
boxname++;
}
function moveitemright(){
with(document.selectform){
elements[[red]prefix+([/red]boxnumber+1[red])[/red]].appendChild(elements[[red]prefix+[/red]boxnumber].options[elements[[red]prefix+[/red]boxnumber].selectedIndex]);}
boxnumber++;
return boxnumber;
}
function moveitemleft(){
with(document.selectform){
elements[[red]prefix+([/red]boxnumber-1[red])[/red]].appendChild(elements[[red]prefix+[/red]boxnumber].options[elements[[red]prefix+[/red]boxnumber].selectedIndex]);}
boxnumber--;
}
function test(){
document.f1.t1.value=boxnumber;
}
</SCRIPT>
[red]</HEAD>
<BODY>[/red]
<FORM name="f1">
<INPUT type=text name="t1">
<INPUT type=button value="additem" onClick="additem()">
<INPUT type=button value="<<" onClick="moveitemleft()">
<INPUT type=button value=">>" onClick="moveitemright()">
<INPUT type=button value="createlist" onClick="createlist()">
<INPUT type=button value="test" onclick="test()">
</FORM>
<FORM name="selectform"></FORM>
</BODY>
</HTML>
[/tt]
 
Upvote 0 Downvote
Amendment
I did not pay enough attention to see the head close above, and body open above, so the two lines I intended to inserted actually is misguided and should be taken out, obviously.
[tt]
</SCRIPT>
<!--
[red]</HEAD>
<BODY>[/red]
-->
<FORM name="f1">
[/tt]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
623
xwb
xwb
JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
233
Daniel K
Daniel K
Ahmad khalafalla
  • Locked
  • Question
How to listen to 'onclick' event on the document
Replies
1
Views
154
feherke
feherke
amrmnabil
  • Locked
  • Question
Dynamic Control Name Access 1
Replies
2
Views
129
amrmnabil
amrmnabil
JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
994
ggriffit
ggriffit

Part and Inventory Search

Sponsor

Back
Top