JavaScript函數無法執行所有操作

Question

我有一個數組Orte ，其中包含郵政編碼和城市名稱。 現在，我想根據在輸入字段中輸入的數字來更改下拉列表。 輸入字段具有onchange功能。 功能如下。

到目前為止，該腳本可以正常運行，但for循環后的最后一行除外。 它從不添加最后一部分，我也不知道為什么。 有人能幫助我嗎。

在此先感謝您的解答！ Burzi

function updateOrt(eingabe){    
    document.getElementById("ort_platzhalter").innerHTML = '<select name="ort">'
    for (var i = 1; i <= Orte.length; i++){ 
        if(Orte[i].PLZ == eingabe){
            document.getElementById("ort_platzhalter").innerHTML += '<option value="' + Orte[i].id + '">' + Orte[i].Ort + '</option>'
        }
    } 
    document.getElementById("ort_platzhalter").innerHTML += "</select>"
}

Answer 1

您應該一口氣更新innerHTML。 首先建立字符串，然后分配它。 另外，數組是零索引的，所以我猜想您想從0開始，並且一旦它是Orte的長度（i = Orte.length）就結束。

function updateOrt(eingabe){
    var str = '<select name="ort">'
    for (var i = 0; i < Orte.length; i++){ 
        if(Orte[i].PLZ == eingabe){
            str += '<option value="' + Orte[i].id + '">' + Orte[i].Ort + '</option>'
        }
    } 
    str += "</select>"
    // now assign the str to innerHTML
    document.getElementById("ort_platzhalter").innerHTML = str;
}

Answer 2

您的問題出在數組循環中。

您正從1轉到Orte.length，當它達到Orte.length時，它將引發異常，並且循環后的代碼不執行。

您應該這樣做：

 function updateOrt(eingabe){ document.getElementById("ort_platzhalter").innerHTML = '<select name="ort">' for (var i = 0; i < Orte.length; i++){ if(Orte[i].PLZ == eingabe){ document.getElementById("ort_platzhalter").innerHTML += '<option value="' + Orte[i].id + '">' + Orte[i].Ort + '</option>' } } document.getElementById("ort_platzhalter").innerHTML += "</select>" } 

因為javascript中的數組被索引為0，並且達到length-1