CODEWITHSUNDEEP
javascriptarraysgetelementbyid
Fr1nk
Fr1nk

Reputation: 35

fill an array with getElementById

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?

Upvotes: 2

Views: 2890

Answers (3)

Jay
Jay

Reputation: 348

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

Upvotes: 0

user2575725
user2575725

Reputation:

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>

Upvotes: 1

CertainPerformance
CertainPerformance

Reputation: 370689

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

Upvotes: 5

Related Questions