setAttribute vs getElementById

[aforstie]

When I am using javascript to add a node to the DOM, I am going to need to set the onFocus attribute that will call another javascript function.

As you can see below most of the attributes are set using setAttribute, but there are a couple where I needed to use getElementById to work in IE. As you can also see I am using setAttribute to set the onFocus attribute that calls the passwordElement() function. This works well in FireFox but does not work in IE. Any ideas how I can get this to work in both browsers

inputElement.setAttribute("value","foo");
inputElement.setAttribute("type","text");
inputElement.setAttribute("onFocus","passwordElement()");
document.getElementById("password-span").appendChild(inputElement);
document.getElementById("password").className = "regtextbox";
document.getElementById("password").maxLength = "20";

 

[BabyJeffy]

Try changing this:

inputElement.setAttribute("onFocus","passwordElement()");

To this:

 inputElement.onfocus = passwordElement;

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

What is Javascript? FAQ216-6094

 

[tsuji]

>inputElement.setAttribute("onFocus","passwordElement()");

Do this instead.
[tt]
if (window.attachEvent) {
inputElement.attachEvent("onfocus","passwordElement");
} else if (window.addEventListener) {
inputElement.addEventListener("focus","passwordElement",true);
}[/tt]

 

[aforstie]

Below is what I now have after reading the replies to this post and looking at other sources.


if (document.getElementById("password").attachEvent) {
document.getElementById("password").attachEvent("onFocus",passwordElement);
alert ("foo - ie - password");
}
else if (document.getElementById("password").addEventListener) {
document.getElementById("password").addEventListener("onFocus",passwordElement,true);
alert ("foo - firefox - password");
}

I get the alerts as I would expect so I know that the "password" element supports the respective event handler, However the event handler is not being added to the DOM. Anyone know the correct syntax to add the event hadler to the DOM (the full function id below)?

function addTextElement() {
inputElement = document.createElement("input");
inputElement.setAttribute("name","password");
inputElement.setAttribute("id","password");
inputElement.setAttribute("value","foo");
inputElement.setAttribute("type","text");
inputElement.setAttribute("size","10");
document.getElementById("password-span").appendChild(inputElement);
// need to use className and maxLength instead of setAttribute to work in IE
document.getElementById("password").className = "regtextbox";
document.getElementById("password").maxLength = "20";
if (document.getElementById("password").attachEvent) {
document.getElementById("password").attachEvent("onFocus",passwordElement);
alert ("foo - ie - password");
}
else if (document.getElementById("password").addEventListener) {
document.getElementById("password").addEventListener("onFocus",passwordElement,true);
alert ("foo - firefox - password");
}
}

 

[tsuji]

I do not recognize what I posted, maybe you know something more.

document.getElementById("password").attachEvent("onFocus",passwordElement);
[tt]document.getElementById("password").attachEvent("onfocus",[red]"[/red]passwordElement[red]"[/red]);[/tt]

document.getElementById("password").addEventListener("onFocus",passwordElement,true);
[tt]document.getElementById("password").addEventListener("[highlight]focus[/highlight]",[red]"[/red]passwordElement[red]"[/red],true);[/tt]

 

[aforstie]

Below works -- thanks for the help!

if (window.attachEvent) {
document.getElementById("password").attachEvent("onfocus",passwordElement);
}
else if (window.addEventListener) {
document.getElementById("password").addEventListener("focus",passwordElement,true);
}

 

[tsuji]

Sorry for the surplus quotes, my bad!