用getElementById填充数组
我正在尝试使用getElementById用我的HTML文件中的数字填充一个数组。
对于HTML，我尝试使用以下命令完成此操作：
<div id="E1_INV_Funds0">1</div>
<div id="E1_INV_Funds1">2</div>
<div id="E1_INV_Funds2">3</div>
<div id="E1_INV_Funds3">4</div>
<div id="E1_INV_Funds4">5</div>
<div id="E1_INV_Funds5">6</div>
<div id="E1_INV_Funds6">7</div>
<div id="E1_INV_Funds7">8</div>然后使用以下Javascript：
<script type="text/javascript">
var graphData = [];
function fillData(){
for( var i = 0; i < 8; i++ ) {
graphData[i] = parseInt(document.getElementById("E1_INV_Funds" + i).value);
return graphData;
}
}
console.log(graphData);
</script>这不会返回任何内容。
是什么导致了这种行为？
回答 3
Stack Overflow用户
发布于 2018-05-29 08:08:35
在您的代码中，return会在任何迭代结束之前立即终止函数。另一个问题是，.value只适用于类似输入的元素-要从div中提取文本，请访问其textContent属性。
如何使用Array.from及其内置的mapping函数，它不需要任何外部突变？
const graphData = Array.from(
{ length: 8 },
(_, i) => Number(document.getElementById('E1_INV_Funds' + i).textContent)
);
console.log(graphData);<div id="E1_INV_Funds0">1</div>
<div id="E1_INV_Funds1">2</div>
<div id="E1_INV_Funds2">3</div>
<div id="E1_INV_Funds3">4</div>
<div id="E1_INV_Funds4">5</div>
<div id="E1_INV_Funds5">6</div>
<div id="E1_INV_Funds6">7</div>
<div id="E1_INV_Funds7">8</div>
Array.from({ length }, mapFn)只是创建长度为length的新数组的函数式方法。将具有length属性的对象传递给Array.from将创建一个undefined数组，第二个参数与Array.prototype.map相同，在返回结果数组之前将其应用于结果数组。对于.map，第一个参数是数组值(在这里无用)，第二个参数是要迭代的项的索引，这就是我们想要的。_只是一个指示器，表示不会使用那里的参数。
请参阅MDN
Stack Overflow用户
发布于 2018-05-29 08:09:35
您从未调用过fillData()函数，而且还有一些更正，请将value替换为innerHTML，此处为document.getElementById("E1_INV_Funds" + i).innerHTML
并移出循环return graphData;
var graphData = []; /* find all where id starts with `E1_INV_Funds` */
document.querySelectorAll('[id^=E1_INV_Funds]').forEach(function(el) {
graphData.push(+(el.textContent || el.innerHTML) || 0); /* parse as number */
});
console.log(graphData);<div id="E1_INV_Funds0">1</div>
<div id="E1_INV_Funds1">2</div>
<div id="E1_INV_Funds2">3</div>
<div id="E1_INV_Funds3">4</div>
<div id="E1_INV_Funds4">5</div>
<div id="E1_INV_Funds5">6</div>
<div id="E1_INV_Funds6">7</div>
<div id="E1_INV_Funds7">8</div>
Stack Overflow用户
发布于 2018-05-29 12:31:14
你需要调用fillData函数，而不是直接打印graphData数组，而且返回应该放在for循环之外(一旦计算完成)。此外，要从div元素获取数据，您需要根据需要使用innerText或innerHTML。
在下面找到可行的解决方案。
var graphData = [];
function fillData() {
for (var i = 0; i < 8; i++) {
graphData[i] = parseInt(document.getElementById("E1_INV_Funds" + i).innerText);
}
return graphData;
}
console.log(fillData());<div id="E1_INV_Funds0">1</div>
<div id="E1_INV_Funds1">2</div>
<div id="E1_INV_Funds2">3</div>
<div id="E1_INV_Funds3">4</div>
<div id="E1_INV_Funds4">5</div>
<div id="E1_INV_Funds5">6</div>
<div id="E1_INV_Funds6">7</div>
<div id="E1_INV_Funds7">8</div>
https://stackoverflow.com/questions/50574678
复制相似问题