How to use forEach to populate HTML elements

Question

How would I use forEach to populate HTML elements? In my simple example below I'm trying to populate each DIV with the counter "increment". I'm using this.innerHTML to target each innerHTML in the array. I know I'm missing something but I can't see it.

var myArray = document.getElementsByClassName('box');
 
myArray = Array.from(myArray);
 
myArray.forEach( (item, increment) => this.innerHTML = increment );

body {
    margin: 0;
    padding: 0;
    font-size: 2rem;
    font-family: arial;
    color: white;
}
 
.box {
    margin: 0 0 10px;
    padding: 10px;
    background-color: blue;
}

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

Swap `this` to `item`, as you declare `item` variable for each array element. — Egor Stambakio, Jul 11 '17 at 06:24
[`arr.forEach(function callback(currentValue, index, array) {}[, thisArg]);`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach): _"If a `thisArg` parameter is provided to `forEach()`, it will be used as callback's `this` value. Otherwise, the value `undefined` will be used as its this value. The `this` value ultimately observable by `callback` is determined according to the [usual rules for determining the this seen by a function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this)."_ — Andreas, Jul 11 '17 at 06:26

Alexander Higgins · Accepted Answer · 2017-07-11T06:31:57.867

2

forEach is passing item and increment as parameters.

this does not refer to your item but to the global window in this scope. You can set the item.innerHTML by using the item parameter.

var myArray = document.getElementsByClassName('box');
 
myArray = Array.from(myArray);
 
myArray.forEach( (item, increment) =>  item.innerHTML = increment} );

body {
    margin: 0;
    padding: 0;
    font-size: 2rem;
    font-family: arial;
    color: white;
}
 
.box {
    margin: 0 0 10px;
    padding: 10px;
    background-color: blue;
}

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

edited Jul 11 '17 at 06:31

answered Jul 11 '17 at 06:24

Alexander Higgins

6,101
1
16
35

1

Was in the middle of doing so. – Alexander Higgins Jul 11 '17 at 06:26
1

That was exactly it. Fixed on the spot. Was `this.innerHTML` pointing at anything at all? – DR01D Jul 11 '17 at 06:29
2

@DR01D [How does the "this" keyword work?](https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) – Andreas Jul 11 '17 at 06:31

Xingzhou Liu · Answer 2 · 2017-07-11T06:49:39.917

0

This code will work: when using forEach, the item in the array is the first argument. "this" is the window in this context.

var myArray = document.getElementsByClassName('box');
var arr = Array.from(myArray)
arr.forEach((item,counter)=>(item.innerHTML = counter))

edited Jul 11 '17 at 06:49

answered Jul 11 '17 at 06:41

Xingzhou Liu

1,265
6
9

How to use forEach to populate HTML elements

2 Answers2