Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

TypeError: <Array>.each is not a function

I have three references to three drop downs on my page, and as each one is changed, I want to run a JavaScript function called validateForm();

My code is below:

jQuery(document).ready(function() {

    var drpSupplier         = document.getElementById('supplier');
    var drpChargeRate       = document.getElementById('formElementChargeRate');
    var drpIDSEmail         = document.getElementById('formElementEmailIDS');
    var formLevel2DDs       = new Array();

    formLevel2DDs.push(drpSupplier);
    formLevel2DDs.push(drpChargeRate);
    formLevel2DDs.push(drpIDSEmail);

    formLevel2DDs.each(function() {
        $(this).change(function() {
            validateForm()
        });
    });
});

But this code is giving me the error:

TypeError: formLevel2DDs.each is not a function

I am using jQuery version 1.8.3 (it is a legacy system).

like image 751
J86 Avatar asked Jan 16 '14 14:01

J86


People also ask

Is not a function Typeerror?

This is a standard JavaScript error when trying to call a function before it is defined. This error occurs if you try to execute a function that is not initialized or is not initialized correctly. This means that the expression did not return a function object.

How do I convert a string to an array in JavaScript?

The split() method splits a string into an array of substrings. The split() method returns the new array. The split() method does not change the original string. If (" ") is used as separator, the string is split between words.

How do you change an object to an array?

To convert an object to an array you use one of three methods: Object.keys() , Object.values() , and Object.entries() . Note that the Object.keys() method has been available since ECMAScript 2015 or ES6, and the Object.values() and Object.entries() have been available since ECMAScript 2017.

Is type array JavaScript?

JavaScript typed arrays are array-like objects that provide a mechanism for reading and writing raw binary data in memory buffers. Array objects grow and shrink dynamically and can have any JavaScript value.


2 Answers

There is no each function on arrays.

As Anton points out in the comments, you don't need each at all for what you're doing; see below the fold.

But if you want each, you have three choices:

  1. Wrap your array in a jQuery instance and use jQuery's each: $(formLevel2DDs).each(function(index, entry) { ... });

  2. Use jQuery's $.each: $.each(formLevel2DDs, function(index, entry) { ... });

    Note that this is not the same function as above.

  3. Use forEach (MDN | Spec): formLevel2DDs.forEach(function(entry, index, array) { ... });

    Note that forEach is new as of ECMAScript5. All modern browsers have it, but you'll need a shim/polyfill for older ones (like IE8). Also note that the order of the arguments to the callback is different than either of the options above.


But to Anton's point, you can do that much more simply:

There's no reason to use getElementById directly in this case, it's not in a tight loop or anything, so:

jQuery(document).ready(function() {

    $("#supplier, #formElementChargeRate, #formElementEmailIDS").change(validateForm);

});

Note that I've also removed the wrapper function from around validateForm. You may need to add it back if validateForm has a return value, and you don't want that return value to be used by jQuery (specifically: if it returned false, jQuery would stop propagation and prevent the default action of the change event).

If you really wanted to have direct access to the DOM elements using those variables:

jQuery(document).ready(function() {

    var drpSupplier, drpChargeRate, drpIDSEmail;
    var formLevel2DDs       = [
        drpSupplier         = document.getElementById('supplier'),
        drpChargeRate       = document.getElementById('formElementChargeRate'),
        drpIDSEmail         = document.getElementById('formElementEmailIDS')
    ];

    $(formLevel2DDs).change(validateForm);
});
like image 58
T.J. Crowder Avatar answered Oct 21 '22 17:10

T.J. Crowder


If you want to use .each() you must wrap the array with jQuery like this

$(formLevel2DDs).each(function() {

It's not necessary to use a loop in this case, just use .change() on the array wrapped with jQuery

$(formLevel2DDs).change(function(){
       validateForm()
});
like image 43
Anton Avatar answered Oct 21 '22 17:10

Anton