So I have a simple class with few properties. Using prototyping I add few methods.These methods returns this, so I could chain tham together.

Get method finds all elements and puts into allCurrentElements, which is an array (or at least I think so). And when I use CreateElement method, it simply creates element and tries to push it to existing array allCurrentElements.

To use it, simply write var a = _h.Get('p').CreateElement('div'). And here is where I get an error Uncaught TypeError: this.allCurrentElements.push is not a function(…).

If I try to assign newly created element using index it does not throw error however, this element does not appear in the array.

var _h = (function(){
    var Helper = function(){
        this.allCurrentElements = [];
    }

    Helper.prototype.Get = function(query){
        this.allCurrentElements = document.querySelectorAll(query);
        return this;
    }

    Helper.prototype.CreateElement = function(el, attr) {
        var elem = document.createElement(el);
        for (var a in attr) {
            elem[a] = attr[a];
        }

        //this.allCurrentElements[this.allCurrentElements.length] = elem;
        this.allCurrentElements.push(elem);
        return this;
    }

    return new Helper();
})();

/

So I have a simple class with few properties. Using prototyping I add few methods.These methods returns this, so I could chain tham together.

Get method finds all elements and puts into allCurrentElements, which is an array (or at least I think so). And when I use CreateElement method, it simply creates element and tries to push it to existing array allCurrentElements.

To use it, simply write var a = _h.Get('p').CreateElement('div'). And here is where I get an error Uncaught TypeError: this.allCurrentElements.push is not a function(…).

If I try to assign newly created element using index it does not throw error however, this element does not appear in the array.

var _h = (function(){
    var Helper = function(){
        this.allCurrentElements = [];
    }

    Helper.prototype.Get = function(query){
        this.allCurrentElements = document.querySelectorAll(query);
        return this;
    }

    Helper.prototype.CreateElement = function(el, attr) {
        var elem = document.createElement(el);
        for (var a in attr) {
            elem[a] = attr[a];
        }

        //this.allCurrentElements[this.allCurrentElements.length] = elem;
        this.allCurrentElements.push(elem);
        return this;
    }

    return new Helper();
})();

https://jsfiddle/Ldp58onu/

• javascript
• arrays
• oop
• prototype

Share Improve this question Follow edited May 3, 2016 at 18:12 Mantas Čekanauskas asked May 3, 2016 at 17:09 Mantas ČekanauskasMantas Čekanauskas 2,23866 gold badges2626 silver badges4848 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You have to check Document.querySelectorAll() documentation https://developer.mozilla/en-US/docs/Web/API/Document/querySelectorAll

Returns a non-live NodeList of all the matching element nodes.

NodeList are used very much like arrays and it's tempting to invoke Array.prototype methods on them, however NodeList objects don't have any of the familiar Array methods.

So you have to iterate through NodeList something like :

Array.prototype.forEach.call(document.querySelectorAll(query), function(element){ 

        allCurrentElements.push(element);

});

document.querySelectorAll() returns NodeList which is an Array-like object.

The problem is that NodeLists are read-only. You'd need to transform it in an array. Array.prototype.slice.call(document.querySelectorAll(query));

after that you'll be able to whatever you want.