I am trying to fill an array with numbers that I have in my HTML file by using getElementById.

For the HTML, I am attempting to do this using:

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

and then using the following 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>

This returns nothing.

What is causing this behavior?

I am trying to fill an array with numbers that I have in my HTML file by using getElementById.

For the HTML, I am attempting to do this using:

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

and then using the following 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>

This returns nothing.

What is causing this behavior?

• javascript
• arrays
• getelementbyid

• developer.mozilla/en-US/docs/Web/API/Document/… – faintsignal Commented May 29, 2018 at 0:07
• @faintsignal That's not the problem – CertainPerformance Commented May 29, 2018 at 0:09
• @CertainPerformance Obviously OP is not that familiar with this function and the info will allow them to solve one of the problems. So I'm not sure what the purpose of your ment is. – faintsignal Commented May 29, 2018 at 0:17
• OP is using getElementById just fine here - he's using it properly, so telling him to read the docs on it will not at all help solve the issue he's having. – CertainPerformance Commented May 29, 2018 at 0:20
• @CertainPerformance OP is calling it fine, but does not seem familiar with the type of object returned, otherwise would not be attempting to access the value property. – faintsignal Commented May 29, 2018 at 0:24

3 Answers 3

In your code, return immediately terminates the function before any of the iterations have finished. Another problem is that .value only works for input-like elements - to extract the text from a div, access its textContent property.

How about using Array.from and its built in mapping function, which doesn't require any external mutation?

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) is just the functional way of creating a new array of length length. Passing an object with a length property to Array.from creates an array of undefineds, and the second argument is the same as Array.prototype.map, applied to the resulting array before returning it. With .map, the first argument is the array value (useless here), and the second argument is the index of the item being iterated over, which is what we want. The _ is just an indicator that the parameter there isn't going to be used.

See MDN

You never invoked function fillData(), also there few more corrections, replace value with innerHTML, here document.getElementById("E1_INV_Funds" + i).innerHTML

and move outside of loop 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>

You need to call fillData function, instead of printing the graphData array directly and also return should be placed outside of the for loop (once the putation is done). Also, to fetch the data from div element, you need to use innerText or innerHTML as per your requirement.

Find the working solution below.

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>