onfocus events + display messages

[vanburg]

Hi all, I'm new to JavaScript and I'm really stuck on something for a project that is probably easy to resolve but I can't seem to figure out after many trial and errors! I'm trying to get ALL of the onfocus events to work for each input field. For example, I want to create a div for the instructional message to appear whenever you click on the text field. It'll be much appreciated if anyone can help! I'm using this code but it only works for the first text field I click on and not the rest of the other text fields:

function init(){ document.querySelector("#fEmail").onfocus = Einstructions;document.querySelector("#fName").onfocus = Ninstructions;document.querySelector("#fAddress1").onfocus = Ainstructions;} //function for instructions on the email text fieldfunction Einstructions(){ //select any message divs that might be where we don't want them, and destroy themmsgs = document.querySelectorAll(".DivMsg");for(var i=0;i<msgs.length;i++){ //ask the parent node of each message div to destory the message divmsgs[i].parentNode.removeChlid(msgs[i]);} var div = document.createElement("div");div.className = "DivMsg";div.innerHTML = "Please enter your e-mail address (example: john@blah.com)."; //append the div to the page, inside of the parent of the current form elementthis.parentNode.appendChild(div); } //function for instructions on the name text fieldfunction Ninstructions(){ //select any message divs that might be where we don't want them, and destroy themmsgs = document.querySelectorAll(".DivMsg");for(var i=0;i<msgs.length;i++){ msgs[i].parentNode.removeChlid(msgs[i]);}var div = document.createElement("div");div.className = "DivMsg";div.innerHTML = "Please enter your full name."; //append the div to the page, inside of the parent of the current form elementthis.parentNode.appendChild(div); }//function for instructions on the address text field function Ainstructions(){ //select any message divs that might be where we don't want them, and destroy themmsgs = document.querySelectorAll(".DivMsg");for(var i=0;i<msgs.length;i++){//ask the parent node of each message div to destory the message divmsgs[i].parentNode.removeChlid(msgs[i]);} var div = document.createElement("div");div.className = "DivMsg";div.innerHTML = "Please enter your full primary address."; //append the div to the page, inside of the parent of the current form elementthis.parentNode.appendChild(div); }

Edited April 3, 2013 by vanburg

[Don E]

Looks like you miss spelled removeChild in each of the functions.

[vanburg]

Thanks for pointing that out Don E. It was a long day yesterday that my eyes couldn't realize that!

[thescientist]

not sure if you looked in your browsers error console, but it would have said something to the effect that removeChlid is not a function, or object has no function remove Chlid, etc which would should have helped narrow down the issue.

Edited April 3, 2013 by thescientist

[Don E]

Thanks for pointing that out Don E. It was a long day yesterday that my eyes couldn't realize that!

It happens!