Zwei Probleme:
1. In Zeile 24 bist Du schon im else-Zweig der Abfrage if(plz.length === 5), d. h. die Länge ist in jedem Fall ungleich 5 und Du kommst nie in den else-Zweig in Zeile 32 hinein.
2. Die Variable "plz" ist doppelt belegt, einmal mit dem DOM-Element und dann mit dessen Value. Besser dem Value einen anderen Namen geben, z. b. "plzval".
So funktioniert es:
window.onload = function () {
var plz = document.getElementById("postleitzahl");
plz.addEventListener("keyup", getJson);
function getJson() {
var plzval = document.getElementById("postleitzahl").value;
if (plzval.match(/[0-9]{5}/)) {
plz.classList.remove("fielderror");
var client = new XMLHttpRequest();
client.open("GET", "http://api.zippopotam.us/de/" + plzval, true);
client.onreadystatechange = function () {
if (client.readyState == 4) {
var jsonData = client.responseText;
//JSON: {"post code": "69115", "country": "Germany", "country abbreviation": "DE", "places": [{"place name": "Heidelberg", "longitude": "8.6868", "state": "Baden-W\u00fcrttemberg", "state abbreviation": "BW", "latitude": "49.4062"}]}
var data = JSON.parse(jsonData); // object object
var data = data['places'][0]['place name'];
document.getElementById("wohnort").value = data;
}
}
client.send();
} else {
plz.classList.add("fielderror");
}
}
}
Alles anzeigen
Ich habe, statt nur die Länge abzufragen, mit einer Regex zusätzlich geprüft, ob die Eingabe auch nummerisch ist.
Zitat
Change greift dann erst, wenn was verändert wurde ?
Change triggert dann, wenn die Eingabe mit Enter bestätigt wurde. Keyup oder Input haben jedoch den Vorteil, dass man den Wert während der Eingabe überprüfen kann, so wie es jetzt der Fall ist.
