problem setting focus()

[joe]

Hi Everyone, could anyone comment on the following problem:
I have a textbox being appended to a cell in a table, and
am trying to call focus() on like this:

<snip>
c01.removeChild(answerbox);
answerbox=document.createElement('input');
answerbox.addEventListener("change",check_answer,false);
answerbox.style.fontSize=FONTSIZE;
answerbox.style.backgroundColor=COLOR_ANSWBG;
answerbox.style.foregroundColor=COLOR_ANSWFG;
answerbox.style.color=COLOR_ANSWFG;
answerbox.style.width="100";
answerbox.style.align="center";
if(n1<13){
c01.appendChild(answerbox);
answerbox.focus();//THIS IS THE LINE CALLING FOCUS()****
tstart=new Date().getTime();
}
</snip>

And my Firefox JavaScript console generates one of these:

<snip>
Error: [Exception... "'Permission denied to get property
XULElement.selectedIndex' when calling method:
[nsIAutoCompletePopup::selectedIndex]" nsresult: "0x8057001e
(NS_ERROR_XPC_JS_THREW_STRING)" location: "JS frame ::
http://asymptopia.org/MathVolcano/mv04.js :: update_display :: line
285" data: no]
Source File: http://asymptopia.org/MathVolcano/mv04.js
Line: 285
</snip>

Line 285 is the "answerbox.focus();" line.

TIA for any help!
-Joe

 

[DU]

Hi Everyone,

Hello Charles

could anyone comment on the following problem:

I have a textbox being appended to a cell in a table, and
am trying to call focus() on like this:

<snip>
c01.removeChild(answerbox);

Your code does not indicate what is c01, where it comes, etc..

Addendum: I found your webpage
http://asymptopia.org/MathVolcano/mv04.js
http://www.asymptopia.org/MathVolcano/MathVolcano.html
and c01 is a table cell.
None of your webpages will trigger web stnadards compliant rendering
mode in Mozilla or Firefox. I strongly recommend you use strict HTML
4.01 and validate both your markup code and CSS code: that way you avoid
/eliminate at the source non-javascript errors which may influence,
affect your DHTML functioning.

answerbox=document.createElement('input');
answerbox.addEventListener("change",check_answer,false);

I'm not sure you can register an event listener to a dynamically created
element. I don't know.

One thing is for sure: if answerbox is a text input, then you need to
explicitly define it as such:

answerbox.type = "text";

http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-62883744

answerbox.style.fontSize=FONTSIZE;
answerbox.style.backgroundColor=COLOR_ANSWBG;
answerbox.style.foregroundColor=COLOR_ANSWFG;

foregroundColor is not valid.
Valid properties are listed here:
http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-CSS2Properties
but color is
http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-CSS2Properties-color

answerbox.style.color=COLOR_ANSWFG;
answerbox.style.width="100";

No unit defined. It could be 100mm or it could be 100pc or 100px. This
is a fairly frequent error. Firefox and Mozilla nightly builds report
such error in the javascript console since rv 1.8a4.

"CSS1 and CSS 2.x specifications require that non-zero values must be
specified with a length unit; otherwise, the css declaration will be
ignored."
Using Web Standards in Your Web Pages
Manipulating Document Style and Content
http://www.mozilla.org/docs/web-developer/upgrade_2.html#dom_manip

Mozilla Web Author FAQ
"Lengths other than zero should be followed by a proper unit without a
space between the number and the unit (eg. 1.2em)."
http://www.mozilla.org/docs/web-developer/faq.html#stylenotworking
http://www.mozilla.org/docs/web-developer/faq.html

answerbox.style.align="center";

It's most likely

answerbox.style.textAlign = "center";

that you want to use... assuming answerbox is a text input.
...unless you want to horizontally center the input inside the cell..?

if(n1<13){
c01.appendChild(answerbox);
answerbox.focus();//THIS IS THE LINE CALLING FOCUS()****

Chances are that the focus() method would be supported if the parser
knew which kind of input you want to dynamically create+insert.
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-65996295

tstart=new Date().getTime();
}
</snip>

And my Firefox JavaScript console generates one of these:

<snip>
Error: [Exception... "'Permission denied to get property
XULElement.selectedIndex' when calling method:
[nsIAutoCompletePopup::selectedIndex]" nsresult: "0x8057001e
(NS_ERROR_XPC_JS_THREW_STRING)" location: "JS frame ::
http://asymptopia.org/MathVolcano/mv04.js :: update_display :: line
285" data: no]
Source File: http://asymptopia.org/MathVolcano/mv04.js
Line: 285
</snip>

The error message is not entirely conclusive. Which version of Firefox
(and build number) are you using?

Line 285 is the "answerbox.focus();" line.

TIA for any help!
-Joe

DU

 

[joe]

DU, Thanks for your reply. I'll pursue a more robust solution
in the long run, but just now I changed the element type of
answerbox to "text" as you suggested, and nothing shows
up at all. It may be a compound problem, in which case re-
working everything is the only soln, but that's what happens
with that change alone. I'm using firefox 1.0.3, also. I like
your .sig quote.
Joe

 

[RobB]

Hi Everyone, could anyone comment on the following problem:
I have a textbox being appended to a cell in a table, and
am trying to call focus() on like this:

<snip>
c01.removeChild(answerbox);
answerbox=document.createElement('input');
answerbox.addEventListener("change",check_answer,false);
answerbox.style.fontSize=FONTSIZE;
answerbox.style.backgroundColor=COLOR_ANSWBG;
answerbox.style.foregroundColor=COLOR_ANSWFG;
answerbox.style.color=COLOR_ANSWFG;
answerbox.style.width="100";
answerbox.style.align="center";
if(n1<13){
c01.appendChild(answerbox);
answerbox.focus();//THIS IS THE LINE CALLING FOCUS()****
tstart=new Date().getTime();
}
</snip>

And my Firefox JavaScript console generates one of these:

<snip>
Error: [Exception... "'Permission denied to get property
XULElement.selectedIndex' when calling method:
[nsIAutoCompletePopup::selectedIndex]" nsresult: "0x8057001e
(NS_ERROR_XPC_JS_THREW_STRING)" location: "JS frame ::
http://asymptopia.org/MathVolcano/mv04.js :: update_display :: line
285" data: no]
Source File: http://asymptopia.org/MathVolcano/mv04.js
Line: 285
</snip>

Line 285 is the "answerbox.focus();" line.

TIA for any help!
-Joe

Just a suggestion:

if(n1 < 13)
{
c01.removeChild(answerbox);
answerbox = document.createElement('input');
answerbox.setAttribute('type', 'text');
var s = answerbox.style;
s.width = '100px';
s.fontSize = FONTSIZE;
s.color = COLOR_ANSWFG;
s.textAlign = 'center';
s.backgroundColor = COLOR_ANSWBG;
answerbox.addEventListener('change', check_answer, false);
c01.appendChild(answerbox);
setTimeout('answerbox.focus();', 100);
tstart = new Date().getTime();
}

The focus issue is a bug iirc.

Looks like that conditional should involve the entire process, just a
guess. Make sure answerbox is global (timers execute with global
scope). I'd suggest using replaceChild() for this, instead of
remove/append.

 

[joe]

Thanks RobB -- I replaced that piece of code with
yours and thought it fixed it, but unfortunately the
error still occurs. But if it's a bug, then that's
good news. The thing works fine, just those
unsightly error for anyone who happens to look.
Thanks again,
Joe

 

[DU]

DU, Thanks for your reply. I'll pursue a more robust solution
in the long run, but just now I changed the element type of
answerbox to "text" as you suggested, and nothing shows
up at all. It may be a compound problem, in which case re-
working everything is the only soln, but that's what happens
with that change alone. I'm using firefox 1.0.3, also. I like
your .sig quote.
Joe

Btw, just after sending the post, I thought that
answerbox.size= 5;
was a better replacement to
answerbox.style.width="100";

DU

 

[joe]

roger that -- i'll try it. Thanks-
joe