配列内の最後の関数を実行していないループ（JavaScript）

Question

boxFill（）配列の最後の関数が実行されていません。私は配列の長さを計算しようとしましたが、不運です。 （私は非常にjs、ちょうど言っている新しいです）。それは最初の4つのインデックスを反復し、インデックスの位置を変更しても、常に最後のインデックスを実行しません。

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>"; 
} 

ためのループとの直接の問題があるのか​​、それは、配列自体に何かありますか？

Answer 1

i<boxFill.length+1はi<boxFill.lengthである必要があります。そうしないと、ループは要素よりももう一度繰り返します。

関数が呼び出されますが、存在しないpResultのインデックスにアクセスしようとするとエラーが発生します。あなたは、ブラウザのコンソールを開く場合は、そのような

などのエラーが未定義

配列のプロパティ「innerHTMLプロパティ」を読み取ることができません表示されるはずですゼロインデックスJavaScriptでです。つまり、今

等、pResult[1]が第二要素にアクセスし、pResult[0]は最初の要素にアクセスすることアクセスpResult[5]、すなわち第6要素にboxFill試行の最後の機能を意味します。しかし、pResultには5つの要素しかありません！

あなたは5から1、listBoxへ4に値を0を渡す必要はありません。

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')} 
] 

それとも1-5を渡したい場合は、あなたがインデックスにアクセスするとき1を減算する必要があります。

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