wongadob Posted October 31, 2011 Share Posted October 31, 2011 Hi All, Sorry if this is SUPER obvious but I really am a JS newbie and also a web dev newbie. I do however understand coding. So I am having problems getting my Javascript to run. Sometimes it does, but most often it does not. Here is the HTML code and then the Javascript file (index.js) it is a simple enter a password screen with the js doing a simple dummy check for now on a pre-defined UN & PW. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="content-type" content="text/xml; charset=utf-8" /> <title>Index</title> <link rel = "stylesheet" type = "text/css" href = "TitlePageStyle.css" /> <script type ="text/javascript" src = "index.js" > </script> </head> <body> <div id = "header"> <img src = "Art\CT logo.png" alt = "Logo"/> </div> <div id = "mainbody"> <form method = "post" name = "login" onsubmit="return login()" action="Homepage.html"> <fieldset> <p> <br/><br/><br/> <label>Username </label> <input type ="text" id = "txtUserName" /> <br/><br/><br/> <label>Password </label> <input type ="password" id = "txtPassword" /> <br/><br/><br/> <button type = "submit"> <img src = "Art\Menu Buttons - Enter.png" alt = "Enter"/> </button> <br/> </p> <div id = "ErrorMessageArea"> </div> </fieldset> </form> </div> <div id="footer"> <p>Complaince Tracker System developed by <a href ="http://www.affiance-it.com">Affiance IT Solutions</a></p> </div> </body></html> Then I have the external file index.js function init(){}function login(){var Username = document.login.getElementById("txtUserName");var Password = document.login.getElementById("txtPassword"); if (Username == "marc" && Password == "password"){ ErrorMessageArea.innerHTML = "<p>Password is Hunky Dory<\/p>"; return true;}else{ ErrorMessageArea.innerHTML = "<p>Username and password combination cannot be found. Please re-enter.<\/p>"; return false;}} When I run the file index.html. It does one of two things. Normally it just transfers to homepage.html whether the un&pw where correct or not. But occasionally it just displays the error for incorrrect password, again whether correct or not and does not transfer. This has me confused. I have tried it across a range or browsers and get the same results? Any help would be much appreciated. Link to comment Share on other sites More sharing options...
wongadob Posted October 31, 2011 Author Share Posted October 31, 2011 I have just noticed one error, but it made no difference. It is still not executing!! This is the new .js code function login(){var txtUserName = document.login.getElementById("txtUserName");var txtPassword = document.login.getElementById("txtPassword");var Username = txtUserName.value;var Password = txtPassword.value;if (Username == "marc" && Password == "password"){ ErrorMessageArea.innerHTML = "<p>Password is Hunky Dory<\/p>"; return true; }else{ ErrorMessageArea.innerHTML = "<p>Username and password combination cannot be found. Please re-enter.<\/p>"; return false;}} Link to comment Share on other sites More sharing options...
Ingolme Posted October 31, 2011 Share Posted October 31, 2011 To access the elements, use document.getElementById(), not document.login.getElementById(). The getElementById() method is exclusive to the document object. By the way, you cannot access forms by just putting their name, and the name attribute is deprecated for the <form> element. To access elements in the document, you should only use the properties and methods described in the DOM specification: document.documentElement node.childNodes node.firstChild, node.lastChild, node.previousSibling, node.nextSibling node.getElementsByTagName() document.getElementById() And for HTML documents, document.body is also valid. In your code, ErrorMessageArea isn't defined, you should define it like this: var ErrorMessageArea = document.getElementById("ErrorMessageArea"); Link to comment Share on other sites More sharing options...
wongadob Posted October 31, 2011 Author Share Posted October 31, 2011 Many many thanks ingolme. That sorted it. I only added the .login later on and probably added it before I realised that I was not initialing the variable property. I took that out. I also added the definition for the ErrorMessageArea. Still did not work, but as soon as I removed the name="login" it started working perfectly. I am now able to roll again!!! Thanks. BTW is there any issue with naming an object with the same name as a function call. Just out of interest? Was that the reason why I had to remove the name="login" as my function is also called login() Thanks again Link to comment Share on other sites More sharing options...
Ingolme Posted October 31, 2011 Share Posted October 31, 2011 No, HTML attributes should have no conflict with Javascript. This is also the reason why you can't just access an HTML element like a variable in Javascript (Internet Explorer has a "feature" that turns every element with an ID attribute into a variable, but you must not rely on it) Always access elements with the DOM methods and properties I showed you earlier. Those are the core DOM properties, but there are a few other properties in the HTML DOM you're allowed to use: document.title: sets or returns the <title> element of the document and updates the window title. document.body: returns a reference to the <body> element. (equal to document.getElementsByTagName("body")[0] Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.