vanburg Posted April 3, 2013 Share Posted April 3, 2013 (edited) 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 Link to comment Share on other sites More sharing options...
Don E Posted April 3, 2013 Share Posted April 3, 2013 Looks like you miss spelled removeChild in each of the functions. Link to comment Share on other sites More sharing options...
vanburg Posted April 3, 2013 Author Share Posted April 3, 2013 Thanks for pointing that out Don E. It was a long day yesterday that my eyes couldn't realize that! Link to comment Share on other sites More sharing options...
thescientist Posted April 3, 2013 Share Posted April 3, 2013 (edited) 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 Link to comment Share on other sites More sharing options...
Don E Posted April 3, 2013 Share Posted April 3, 2013 Thanks for pointing that out Don E. It was a long day yesterday that my eyes couldn't realize that! It happens! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now