Search the Community

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); }