如何使用forEach填充HTML元素

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

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

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 2rem; 
 
    font-family: arial; 
 
    color: white; 
 
} 
 
\t 
 
.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>

来源

2017-07-11 DR01D

您是不是指'item.innerHTML = increment'？ – Marty

当您为每个数组元素声明'item'变量时，将'this'交换为'item'。 – wostex

['arr.forEach（function callback（currentValue，index，array）{} [，thisArg]）;']（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach）：_“如果给'forEach（）'提供'thisArg'参数，它将被用作回调函数的'this'值，否则'undefined'将被用作它的值。 ''callback'最终可以观察到的'this'值是根据[通过函数确定的常用规则]来确定的（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/运营商/这）。“_ – Andreas

forEach在流逝item并increment作为参数。

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

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

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 2rem; 
 
    font-family: arial; 
 
    color: white; 
 
} 
 
\t 
 
.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>

来源

2017-07-11 06:24:35

正在这样做。 –

就是这样。当场固定。 “this.innerHTML”指向什么？ – DR01D

@ DR01D [“this”关键字是如何工作的？]（https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work） – Andreas

该代码将工作：使用的forEach时，数组中的项是第一个参数。 “这个”是这方面的窗口。

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

来源

2017-07-11 06:41:32

如何使用forEach填充HTML元素

回答

相关问题