javascript - 如何使用 forEach 填充 HTML 元素

Question

我如何使用 forEach 来填充 HTML 元素？在我下面的简单示例中，我试图用计数器“增量”填充每个 DIV。我正在使用 this.innerHTML 来定位数组中的每个 innerHTML。我知道我错过了一些东西，但我看不到它。

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>

Answer 1

forEach 将 item 和 increment 作为参数传递。

this 不是指您的 item，而是指该范围内的全局窗口。您可以使用 item 参数设置 item.innerHTML。

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>