Adding a class to an array of elements with forEach not working?

Question

I converted a node list returned by the querySelector() method to an array but I still can't get forEach to work (I just want to add a class). Can someone tell me what I'm doing wrong?

My code is extremely simple as I'm very new to JS.

This is the HTML:

<table>
    <tr>
        <th>This is a th</th>
        <th>This is a th</th>
        <th>Target</th>
        <th style="display: none;"></th>
    </tr>
    <tr>
        <td>This is a table cell</td>
        <td>This is a table cell</td>
        <td>Target</td>
        <td style="display: none;"></td>
    </tr>
</table>

JS:

(function(){

    "use strict";

    var th = Array.prototype.slice.call(document.querySelectorAll("th")),
        td = Array.prototype.slice.call(document.querySelectorAll("td"));

    function test(index, el, array) {
        el.className = "color";
    }

    th.forEach(test());


})();

anurupr · Accepted Answer · 2014-03-06 12:40:30Z

1

Your argument order was wrong . This should work

(function(){

    "use strict";

    var th = Array.prototype.slice.call(document.querySelectorAll("th")),
        td = Array.prototype.slice.call(document.querySelectorAll("td"));

    function test(el, index, array) {
        el.className = "color";
    }

    th.forEach(test);


})();

answered Mar 6, 2014 at 12:40

anurupr

2,3442 gold badges20 silver badges29 bronze badges

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

Comments

Vicky Gonsalves · Accepted Answer · 2014-03-06 12:38:32Z

0

(function(){
        "use strict";
        var th = Array.prototype.slice.call(document.querySelectorAll("th")),
                td = Array.prototype.slice.call(document.querySelectorAll("td"));

        function test(el) {
            el.className = "color";
        }
        th.forEach(function(el){
            test(el);
        });
    })();

Try This:

answered Mar 6, 2014 at 12:38

Vicky Gonsalves

11.8k3 gold badges39 silver badges58 bronze badges

Comments

Mehran Hatami · Accepted Answer · 2014-03-06 12:39:17Z

0

Firstly you already have th in forEach, so you don't need to pass it again.

then you should do it like:

th.forEach(test);

or change the test function:

function test() {
    return function(index, el, array){
        el.className = "color";
    };
}
th.forEach(test());

answered Mar 6, 2014 at 12:39

Mehran Hatami

13k6 gold badges31 silver badges36 bronze badges

Comments

krishnan · Accepted Answer · 2014-03-06 12:40:21Z

0

Here is a working fiddle http://jsfiddle.net/7pVD6/

(function(){

    "use strict";

    var th = Array.prototype.slice.call(document.querySelectorAll("th")),
        td = Array.prototype.slice.call(document.querySelectorAll("td"));

    function test(el) {
        el.className = "color";
    }

    th.forEach(function(el)
               {
                   test(el)
               });


})();

You should pass a callback that takes a single argument(the element) in the forEach or directly pass test(el)

answered Mar 6, 2014 at 12:40

krishnan

31 bronze badge

Collectives™ on Stack Overflow

Adding a class to an array of elements with forEach not working?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest