Global Variables not Accessible to Functions Javascript

Question

I am using javascript to validate the information a user has put into a form. I have two functions in my code which both need to check that the information in two text fields is the same. One function is called when the form is submitted, the other when something is typed into the second field.

However neither function seems to be able to access these variables. Google Developer tools shows their value to be Null. The code works fine when I declare the variables within each function but I thought it should be possible to declare them just once

var user1 = document.getElementById('user1');
var user2 = document.getElementById('user2');

function validateText() {
    var message2 = document.getElementById('confirmMessage');  
    if(user1.value !== user2.value) {
        message2.innerHTML = "Your usernames must be the same!";   
        return false;
    }
}

function checkUser() {
    //Store the Confimation Message Object ...
    var message = document.getElementById('confirmMessage');
    //Compare the values in the user field 
    //and the confirmation field
    if(user1.value == user2.value) {
        //The usernames match. 
        // tell the user that they have entered the correct password 
        message.innerHTML = "Passwords Match!"
    }
}

Can you post the related HTML?

j08691
– j08691

2014-01-04 22:56:39 +00:00
Commented Jan 4, 2014 at 22:56 — j08691
– j08691, Commented Jan 4, 2014 at 22:56

Ziarno · Accepted Answer · 2014-01-04 22:58:22Z

1

you need to define these variables after the document is loaded.

var user1, user2;
document.onload = function () {
    user1 = document.getElementById('user1');
    user2 = document.getElementById('user2');
}

answered Jan 4, 2014 at 22:58

Ziarno

7,5725 gold badges37 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

hugomg · Accepted Answer · 2014-01-04 22:59:58Z

0

If the user1 and user2 elements are created by Javascript or by HTML that is placed after the JS (perhaps you are inserting this JS in the head section) then they still dont exist when you first run your script. This means that the getElementById variables will not find anything and return null.

You need to make sure that you call getElementByID after the apropriate elements have been created. ONe easy way to do that is put the calls inside the validation functions but another possibility would be to put it in an onLoad handler.

I would prefer sticking them in the validators though - getting elements by ID is not an expensive operation (so you don't need to worry about performance) and the closer you fetch the data to when you use it the less stuff to worry about.

answered Jan 4, 2014 at 22:59

hugomg

70.4k30 gold badges168 silver badges257 bronze badges

3 Comments

user3161409 Over a year ago

Ok, I've got it now, thanks. I declared my variables at the top of my external javascript file so the value is null because nothing has been typed in by the the user at that point. What if I declare a function gets the two elements and checks they match and then call that twice when needed?

hugomg Over a year ago

@user3161409: you could definitely do that although I would recommend having that function return the values in an object instead of using global variables like you are doing now.

user3161409 Over a year ago

Yes, I will get rid of the global variables and the function will just return true or false to say the user inputs match or don't.

Collectives™ on Stack Overflow

Global Variables not Accessible to Functions Javascript

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related