How to fix the 'map is not a function' error in Javascript

Question

I'm looping through all anchor tag in an HTML with a class (.add-to-cart) to change text content to shop now, using map() but i am getting an error that says .map is not a function.

<!--HTML CODE -->
 <div class="four columns">
        <div class="card">
                <a href="#" class="u-full-width button-primary button input add-to-cart" data-id="5">Add to Cart</a>
        </div>
</div> <!--.card-->
<div class="four columns">
        <div class="card">
                <a href="#" class="u-full-width button-primary button input add-to-cart" data-id="5">Add to Cart</a>
        </div>
</div> <!--.card-->
<div class="four columns">
        <div class="card">
                <a href="#" class="u-full-width button-primary button input add-to-cart" data-id="5">Add to Cart</a>
        </div>
</div> <!--.card-->


//JAVASCRIPT CODE
const addCartBtns = document.querySelectorAll('.add-to-cart');


addCartBtns.map(function(cartBtn){
  console.log(cartBtn.textContent="shop now");
});

I expect the output to change text content of anchor tags to "shop now".

If you're not going to use the return value of .map() than you shouldn't be using .map(). In your case you should be using .forEach() - and with a modern browser this will already be available on the NodeList — Andreas
– Andreas, Commented Apr 7, 2019 at 16:43

Maheer Ali · Accepted Answer · 2019-04-07 16:47:15Z

31

document.querySelectorAll returns a NodeList which should be converted to real Array before using map()

The Document method querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors

You can use Spread Operator

const addCartBtns = [...document.querySelectorAll('.add-to-cart')]

Or you can can use Array.from

const addCartBtns = Array.from(document.querySelectorAll('.add-to-cart'))

Notice that you are using map(). map() is used when you want to create a new array bases on the values of existing array of same length. Here you are modifying the array. So you can use forEach

addCartBtns.forEach(function(cartBtn){
  console.log(cartBtn.textContent="shop now");
});

Note:forEach will work fine if NodeList is not converted to array.

edited Apr 7, 2019 at 16:47

answered Apr 7, 2019 at 16:40

Maheer Ali

36.5k8 gold badges53 silver badges83 bronze badges

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

Comments

Damian Bartosik · Accepted Answer · 2019-04-07 16:43:34Z

2

You cannot use map simply because the output from querySelectorAll is a NodeList object, not Array. If you want to loop every item in the NodeList, you should use forEach instead.

Take a look at the NodeList API documentation:
https://developer.mozilla.org/en-US/docs/Web/API/NodeList

However you can quickly convert NodeList object to Array
Fastest way to convert JavaScript NodeList to Array?

[...addCartBtns]

Array.prototype.slice.call(addCartBtns);

Array.from(addCartBtns)

answered Apr 7, 2019 at 16:43

Damian Bartosik

5087 silver badges25 bronze badges

Comments

mbojko · Accepted Answer · 2019-04-07 16:42:56Z

1

Here, you don't actually need map, forEach will do, and NodeList has a forEach. Therefore:

addCartBtns.forEach(function(cartBtn) {
  console.log(cartBtn.textContent="shop now");
});

answered Apr 7, 2019 at 16:42

mbojko

14.8k2 gold badges21 silver badges28 bronze badges

Collectives™ on Stack Overflow

How to fix the 'map is not a function' error in Javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related