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>

这不会返回任何内容。

导致此行为的原因是什么？

Answer 1

在您的代码中，return会在任何迭代完成之前立即终止该函数。另一个问题是.value仅适用于类似输入的元素 - 从div中提取文本，访问其textContent属性。

如何使用Array.from及其内置的map ping函数，它不需要任何外部变异？

＆＃13;

const graphData = Array.from(
  { length: 8 },
  (_, i) => Number(document.getElementById('E1_INV_Funds' + i).textContent)
);
console.log(graphData);

＆＃13;

<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>

＆＃13;

Array.from({ length }, mapFn)只是创建长度为length的新数组的功能方式。将具有length属性的对象传递给Array.from会创建一个undefined s数组，第二个参数与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数组，并且返回应该放在for循环之外（一旦计算完成）。另外，要从div元素获取数据，您需要根据您的要求使用innerText或innerHTML。

找到下面的工作解决方案。

＆＃13;

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());

＆＃13;

<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>

＆＃13;

用getElementById填充数组

3 个答案: