CODEWITHSUNDEEP
javascriptarrays
carlost t
carlost t

Reputation: 3

For loop not performing last function in array (JavaScript)

The last function in the boxFill() array is not being performed. I've tried accounting for the length of the array but to no luck. (I'm very new to js, just saying). It iterates through the first four indices, and always does not perform the last index, even when I change the position of the index.

var pResult1 = document.getElementById("result1");
 var pResult2 = document.getElementById("result2");
 var pResult3 = document.getElementById("result3");
 var pResult4 = document.getElementById("result4");
 var pResult5 = document.getElementById("result5");
 var pResult = [pResult1,pResult2,pResult3,pResult4,pResult5]

 function checkBox() {
    /*var aFlor = [2.8,"Florida","Science"];   
    var bGeo = [3.5,"Georgia","Business"];
    var cTex = [2.3,"Texas","Health"];
    var dNew = [4.2,"NewYork","Law"];
    var eMic = [3.9,"Michigan","Humanities"];*/
    var boxValue = document.getElementById("searchBox").value;
    var boxFill = [
      function(){listBox('1','Florida state Scholarship','3.5','Florida','Applied Sciences')},
      function(){listBox('2','Great Achievers Scholarship','4.0','Texas','Health')},
      function(){listBox('3','Helpful Future Scholarship','3.0','Georgia','Business')},
      function(){listBox('4','Never Give Up Scholarship','2.0','Michigan','Humanities')},
      function(){listBox('5','Times Square Talent Scholarship','3.5','New York','Law')}
    ]

  if  (boxValue.includes("f")) {
       for (i=0;i<boxFill.length+1;i++) {
        boxFill[i]();
       }
function listBox(number,name,gpa,state,major) { 
    pResult[number].innerHTML = 
"<dl><dt>"+number+". "+name+"</dt><dd>- minimum GPA is: "+gpa+"</dd><dd>- You must live in "+state+"</dd><dd>- For the "+major+" major!</dd></dl>";
 }

Is there a direct problem with the for loop or is it something in the array itself?

Upvotes: 0

Views: 63

Answers (1)

Felix Kling
Felix Kling

Reputation: 816364

i<boxFill.length+1 should be i<boxFill.length, otherwise your loop iterates one more time than there are elements.

The function gets called, but it will throw an error because it tries to access an index in pResult that doesn't exist. If you open your browser's console you should see an error such as

Cannot read property 'innerHTML' of undefined

Arrays are zero-indexed in JavaScript. That means that pResult[0] will access the first element, pResult[1] accesses the second element, etc.

Now, the last function in boxFill tries to access pResult[5], i.e. the sixth element. But pResult only has five elements!

You need pass the values 0 to 4 to listBox, not 1 to 5:

var boxFill = [
  function(){listBox(0,'Florida state Scholarship','3.5','Florida','Applied Sciences')},
  function(){listBox(1,'Great Achievers Scholarship','4.0','Texas','Health')},
  function(){listBox(2,'Helpful Future Scholarship','3.0','Georgia','Business')},
  function(){listBox(3,'Never Give Up Scholarship','2.0','Michigan','Humanities')},
  function(){listBox(4,'Times Square Talent Scholarship','3.5','New York','Law')}
]

Or if you want to pass 1-5 then you need to subtract 1 when accessing the index:

pResult[number-1].innerHTML = ...;

Upvotes: 2

Related Questions