By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
460,044 Members | 1,248 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 460,044 IT Pros & Developers. It's quick & easy.

onfocus, onblur on dynamic input box.

P: n/a
Hello all,

I have a function that dynamically adds rows and columns to the page.
Everything works well except onfocus // onblur attributes. For some
reason, when entering the input box it doesn't highlight. If I delete
the onblur line, each of the boxes is highlighted all the time
regardless of focusing the input box.

Can someone help me?

Tzachi
var addrownum=0;
function addRow(id){
var tbody = document.getElementById(id).getElementsByTagName(" TBODY")
[0];
var row = document.createElement("TR");
var td = new Array();
var y = 0;
addrownum++;
for (var y=1;3>=y;y++) {
td[y] = document.createElement("TD");
td[y].setAttribute("align","right");
S = document.createElement("input");
S.setAttribute("type","text");
S.setAttribute("name","c"+y+"r"+addrownum);
S.setAttribute("id","c"+y+"r"+addrownum);
S.setAttribute("dir","rtl");
S.setAttribute("class","box");
S.setAttribute("size","33%");
S.setAttribute("maxlength","33%");
// main problem

S.setAttribute("onFocus",S.className="box_on");
S.setAttribute("onBlur",S.className="box");
// end of main problem
td[y].appendChild(S);
row.appendChild(td[y]);
} // end of for loop
tbody.appendChild(row);
} // end of func
Jul 23 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
On 19 Sep 2004 11:09:09 -0700, Tzachi <tz*********@hotmail.com> wrote:
I have a function that dynamically adds rows and columns to the page.
Everything works well except onfocus // onblur attributes. For some
reason, when entering the input box it doesn't highlight. If I delete
the onblur line, each of the boxes is highlighted all the time
regardless of focusing the input box.
[snip]
S.setAttribute("onFocus",S.className="box_on");
S.setAttribute("onBlur",S.className="box");


That because these lines don't do what you think they do. What actually
happens in the first line is that S.className is assigned the value,
'box_on'. S is then given the attribute, onFocus, with that same value. A
similar thing occurs with the second line.

Closer to what you want is:

S.setAttribute("onFocus", 'this.className="box_on";');
S.setAttribute("onBlur", 'this.className="box";');

however, it would be better to use the actual properties and assign
function references.

function blurInput() {this.className = 'box';}
function focusInput() {this.className = 'box_on';}

S.onblur = blurInput;
S.onfocus = focusInput;

In fact, you shouldn't be using setAttribute in the code you presented at
all unless this is an XML document. HTML elements define properties that
let you directly access the attribute value. For example,

S.type = 'text';
S.className = 'box';
// etc...

[snip]

Hope that helps,
Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.