onfocus, onblur on dynamic input box.

[Tzachi]

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

 

[Michael Winter]

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