Vanilla JS - How to map thu an array of strings, and set InnerHtml of a Button [duplicate]

Question

I'm writing a simple app in vanilla JS. I have an array of strings, and I want to map thru the array and assign the values to innerHTML to the buttons. Can I do it with .map()? As of right now, the most I can get is the last thing assigned to the button's innerHTML ('next >')

Here's my code

var buttons = document.getElementsByTagName("button");
const a = ["click for more", "see more", "details page", "next >"];

a.map((i) => {
  buttons.innerHTML = i;
});

<div>
  <button>Submit</button>
  <button>Submit</button>
  <button>Submit</button>
  <button>Submit</button>
</div>
<script src="index.js"></script>

What do you think the s in document.getElementsByTagName signals? — connexo
– connexo, Commented Dec 8, 2022 at 14:38

Harun Yilmaz · Accepted Answer · 2022-12-08 14:19:33Z

3

You're so close to the solution. You just need to access the array items with index you get from Array.forEach()

Note that Array.map() is replaced with Array.forEach() since you don't use the return value of the map() function which creates a new array. (Thanks to @Ivar)

var buttons = document.getElementsByTagName("button");
const a = ["click for more", "see more", "details page", "next >"];

a.forEach((text, index) => {
  buttons[index].innerHTML = text;
});

<body>
    <div>
      <button>Submit</button>
      <button>Submit</button>
      <button>Submit</button>
      <button>Submit</button>
    </div>
    <script src="index.js"></script>
  </body>

edited Dec 8, 2022 at 14:19

answered Dec 8, 2022 at 14:16

Harun Yilmaz

8,5793 gold badges30 silver badges40 bronze badges

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

Comments

mplungjan · Accepted Answer · 2022-12-08 14:25:39Z

1

You missed to index the button

If you use querySelectorAll on the buttons, you get a NodeList.forEach, that makes more sense than the one using the Array.forEach

var buttons = document.querySelectorAll("button");
const a = ["click for more", "see more", "details page", "next >"];

buttons.forEach((but, i) => {
  but.innerHTML = a[i];
});

<body>
  <div>
    <button>Submit</button>
    <button>Submit</button>
    <button>Submit</button>
    <button>Submit</button>
  </div>
  <script src="index.js"></script>
</body>

edited Dec 8, 2022 at 14:25

answered Dec 8, 2022 at 14:21

mplungjan

180k29 gold badges183 silver badges246 bronze badges

2 Comments

David Thomas Over a year ago

For completion - and it's not worth providing yet another answer - it's worth noting that given the NodeList of elements and the Array of Strings, there's two possibilities: demo, one with NodeList.prototype.forEach(), and the other with Array.prototype.forEach().

connexo Over a year ago

OP IS looping over the result from the getElements No. They are looping over an array of strings. It's exactly the thing marked as a dupe.

Collectives™ on Stack Overflow

Vanilla JS - How to map thu an array of strings, and set InnerHtml of a Button [duplicate]

2 Answers 2

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Linked

Related