JavaScript Array behaving differently

Question

I have html like

<div id="MAC_Allocation_Heading">
               <span style="position:relative;left:2%;"> 
                   MAC Allocation
               </span> 
               <span style="position:relative;left:9%;"> 
                  <label>Quantity</label>
                  <input type="text" style="width:40%" name="txtMACNeededAllocations"/>
               </span> 
  </div>

Now in my .js file I have a global array as

var user_entry = [$("#MAC_Allocation_Heading input[type=text]:first")]

and inside FormValidate() I have the following code

function FormValidate() {

     console.log(user_entry[0].val());
}

I run the application and entered value in text box. But I am getting console output as 'undefined'.

If I put the array "user_entry" inside the function then am able to get the textbox value.
What is the reason?
I Would love to keep this array globally as it will be used by other functions also

Most likely you are running `var user_entry = [$("#MAC_Allocation_Heading input[type=text]:first")]` before the element exists and hence you get an empty jQuery object. Please read the [**jQuery tutorial**](http://learn.jquery.com/about-jquery/how-jquery-works/): *"To run code as soon as the document is ready to be manipulated, jQuery has a statement known as the ready event: `$( document ).ready(function() { ... });` "* — Felix Kling, Feb 19 '14 at 09:30
I'm not talking about the function. I'm talking about the variable assignment. — Felix Kling, Feb 19 '14 at 09:32
And even if you're running it on a button click, the code **should** go inside `$(document).ready(...)`. — Rutwick Gangurde, Feb 19 '14 at 09:33
possible duplicate of [Why does jQuery or a DOM method such as \`getElementById\` not find the element?](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Felix Kling, Feb 19 '14 at 09:34
To underline the problem, have a look at this jsfiddle, which works. It is about the time when your assignment to `user_entry` is called. http://jsfiddle.net/8dcsn/ — Dennis, Feb 19 '14 at 09:35
The element is not dynamically created.Its in Dom on page load. — Robert_Junior, Feb 19 '14 at 09:35
If you put the `script` tag with that code **above** the element in the HTML document, then the code runs **before** the element exists. The browser parsers/evaluates the HTML document from top to bottom. — Felix Kling, Feb 19 '14 at 09:36
@thank you all. that was the reason . I put the array inside document.ready and it solved my problem. Another DOM basic learned today@@@@ — Robert_Junior, Feb 19 '14 at 09:43

score 0 · Answer 1 · answered Feb 19 '14 at 09:43

Try this:

    var user_entry = [];


    function FormValidate() 
    {  
         alert(user_entry[0].val());
    }

    $(document).ready(function()
    {
         user_entry = [$("#MAC_Allocation_Heading input[type=text]:first")]  
    })

By this you can achieve "I Would love to keep this array globally as it will be used by other functions also".

score 0 · Answer 2 · answered Feb 19 '14 at 09:49

I got the issue as per comments above

I initialized the array inside $( document ).ready(function() { ... });
and this solved my issue

The problem is I included the .js file before tag so that before DOM is loaded completely I try to get a reference to the object which is obviously empty

JavaScript Array behaving differently

2 Answers2