CODEWITHSUNDEEP
javascripthtml
Rorschach
Rorschach

Reputation: 3802

Javascript function in a .js cannot getElementById in the .html

I have a login.js which has a function which is called when the clickme button in the HTML is pressed.

document.getElementById('clickMe').addEventListener('click',execuateAllCode);

The line below is in the function that is called by the clickme button and it does not work

var password = document.getElementById("password").value;

It gives this error:

Uncaught TypeError: Cannot read property 'value' of null

popup.html contains this code:

...
<input id="clickMe" type="button" value="clickMe"/>
<input type="password" name="password" id="password" value="temppassword" placeholder="Password"/>
...

The error should mean that there is no element that contains an id="password". But I do have something with that id. Can the function in login.js not "see" the input in the HTML file?

EDIT 1: I have tried to add:

window.onload = function() {
  execuateAllCode()
};

To the .js file, but this does not get rid of the error, it also causes errors in other parts of the code and stops the styling.

The HTML:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
    <input id="clickMe" type="button" value="clickme"/>
    <script language="javascript" src="login.js"></script>
    <input type="text" name="email" id="username" value="[email protected]" placeholder="Email"/>
    <input type="password" name="password" id="password" value="temppass" placeholder="Password"/>
</body>
</html>

login.js: 

document.getElementById('clickMe').addEventListener('click',execuateAllCode);
function execuateAllCode() {
    document.write("<br />" + "From login" + "<br />");
    var output;
    output = FunctionOne();
    document.write("<br /> the output:  " + output + "<br />");
}

function FunctionOne(){
...
  var password = document.getElementById("password").value;
  var user_name = document.getElementById("username").value;
...
}

Upvotes: 0

Views: 883

Answers (4)

Igor
Igor

Reputation: 15893

Your popup.html is not the page that includes login.js - that's why code in login.js does not find a DOM element with id="password". The page that includes login.js contains, however, a button with id="clickMe".

After seeing your execuateAllCode:

http://www.w3schools.com/jsref/met_doc_write.asp - "The write() method is mostly used for testing: If it is used after an HTML document is fully loaded, it will delete all existing HTML." Add a div element where you put any output using innerText or innerHTML instead of using document.write.

Upvotes: 2

Nitin Bagoriya
Nitin Bagoriya

Reputation: 158

What you need to do is :

  1. Initialize variable password outside the function and then declare it
  2. Or you can use window.onload = function_Name;
  3. Why don't you call function on login button click or any event ?

Upvotes: 0

Nishant Dongare
Nishant Dongare

Reputation: 549

Your are fetching that element which not loaded yet(DOM is not loaded). That's why you are facing the issue.

window.onload = function() {
  /*Do that stuff in this function*/
};

For more reference check this link. https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
Hope this will help :)

Upvotes: 3

WesW
WesW

Reputation: 128

A great way to debug javascript is warping your variables and events in a console.log and checking their result in the browser console.

Try adding console.log(password) right after you set it equal to the value of the input. This will tell you if that jQuery functionality is working. That will help you find out what the HTML is "seeing"

Upvotes: -1

Related Questions