JavaScript function doesn't execute everything

Question

I have an array Orte that contains postcode and the name of the city. Now I want to change the dropdown depending on the number entered in the input field. The input field has an onchange function. The function is the one below.

The script works so far except the last line after the for loop. It never adds the last part and I don't know why. Can someone help me please.

Thanks in advance for the anwsers! 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>"
}

use var myOrt = document.getElementById("ort_platzhalter"); don't retrieve it again every time . — jony89
– jony89, Commented Dec 26, 2014 at 15:34
Using .innerHTML += htmlPart; will most likely never have the expected result. Whenever you change innerHTML it will immediately parsed into DOM, as of that an incomplete html code will be fixed. innerHTML += "</select>" will never have an effect, as .innerHTML cannot be incomplete. — t.niese
– t.niese, Commented Dec 26, 2014 at 15:36
I'm also german, but please don't write names/functions/vars in german. It's a nightmare for every non-german developer you want to work with or who needs to work with your code. Write international code. — morkro
– morkro, Commented Dec 27, 2014 at 20:16

forgivenson · Accepted Answer · 2014-12-26 15:44:08Z

1

You should update the innerHTML in one shot. Build up the string first, then assign it. Also, arrays are zero-indexed, so I am guessing you want to start at 0, and end once it is the length of 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;
}

answered Dec 26, 2014 at 15:44

forgivenson

4,4332 gold badges21 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Born2Code · Accepted Answer · 2014-12-26 15:42:40Z

0

your problem is in the array loop.

You are going from 1 to Orte.length, when it reaches Orte.length it throws an exception and the code after the loop does not execute.

you should do it this way:

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

because arrays in javascript are 0 indexed and go up to length-1

answered Dec 26, 2014 at 15:42

Born2Code

1,0756 silver badges13 bronze badges

Collectives™ on Stack Overflow

JavaScript function doesn't execute everything

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related