用 getElementById 填充数组

Question

我正在尝试使用 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>

这个returns没什么。

是什么导致了这种行为？

Answer 1

在您的代码中，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

Answer 2

您从未调用函数 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>

Answer 3

您需要调用 fillData 函数，而不是直接打印 graphData 数组，并且 return 应该放在 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>

用 getElementById 填充数组

fill an array with getElementById

javascript

arrays

getelementbyid