Verschachtelte If Else Funktionn gibt mir immer nur letzte Else zurück

dzydzy · 6. März 2020

Hallo zusammen

Ich bin Rookie im Bereich der Programmierung und habe erst vor ca. einem Monat mit HTML/CSS/JS angefangen. Aus diesem Grund sehe ich manchmal die Fehler nicht und hoffe auf euren Input

Ich habe eine verschachtelte If Else Funktion ( unter function holeplan() ). Irgendwie zeigt es mir immer nur die letzte Else-Funktion an. Was mache ich falsch?

Danke euch!

PS: Lasst euch nicht von diesen knalligen Farben irritieren, die brauchte ich als Orientierung für die Arbeit mit DIV Layouts wie gesagt, Rookie..

Code

basti1012 · 6. März 2020

Ich weiß gar nicht wo man da anfangen soll.

1. Lade deinen Code nächstes mal als Text hoch , oder bei der größe mache bei Codepen eine Testseite fertig.

Dann hast du unmengen Code zu viel ,der gar nicht nötig ist und kürzer auch geht.

Zb deine Else kram um den es geht

JavaScript

if ((zielzu > 1500 && zielzu < 1700) && (wei === "alles")) {
    document.getElementById("outiputi").innerHTML = "1500 bis 1700 und Allesesser";
    } else if 
    ((zielzu > 1700 && zielzu < 1900) && (wei === "alles")) {
    document.getElementById("outiputi").innerHTML = "1701 bis 1900 und Allesesser";
    } else if 
    ((zielzu > 1900 && zielzu < 2100) && (wei === "alles")) {
    document.getElementById("outiputi").innerHTML = "1901 bis 2100 und Allesesser";
    } else if 
    ((zielzu > 2100 && zielzu < 2300) && (wei === "alles")) {
    document.getElementById("outiputi").innerHTML = "2101 bis 2300 und Allesesser";
    } else if 
    ((zielzu > 2300 && zielzu < 2500) && (wei === "alles")) {
    document.getElementById("outiputi").innerHTML = "2301 bis 2500 und Allesesser";
    } else if 
    ((zielzu > 2500 && zielzu < 2700) && (wei === "alles")) {
    document.getElementById("outiputi").innerHTML = "2501 bis 2700 und Allesesser";
    } else if 
    ((zielzu > 2700 && zielzu < 2900) && (wei === "alles")) {
    document.getElementById("outiputi").innerHTML = "2701 bis 2900 und Allesesser";
    } else if 
    ((zielzu > 2900 && zielzu < 3100) && (wei === "alles")) {
    document.getElementById("outiputi").innerHTML = "2901 bis 3100 und Allesesser";
    } else if 
    ((zielzu > 3100 && zielzu < 3300) && (wei === "alles")) {
    document.getElementById("outiputi").innerHTML = "3101 bis 3300 und Allesesser";
    } else if 
    ((zielzu > 3300 && zielzu < 3500) && (wei === "alles")) {
    document.getElementById("outiputi").innerHTML = "3301 bis 3500 und Allesesser";
    } else if 
    ((zielzu > 3500 && zielzu < 3700) && (wei === "alles")) {
    document.getElementById("outiputi").innerHTML = "3501 bis 3700 und Allesesser";
    } else if 
    ((zielzu > 1500 && zielzu < 1700) && (wei === "veget")) {
    document.getElementById("outiputi").innerHTML = "1500 bis 1700 und Vegetarier/in";
    } else if 
    ((zielzu > 1700 && zielzu < 1900) && (wei === "veget")) {
    document.getElementById("outiputi").innerHTML = "1701 bis 1900 und Vegetarier/in";
    } else if 
    ((zielzu > 1900 && zielzu < 2100) && (wei === "veget")) {
    document.getElementById("outiputi").innerHTML = "1901 bis 2100 und Vegetarier/in";
    } else if 
    ((zielzu > 2100 && zielzu < 2300) && (wei === "veget")) {
    document.getElementById("outiputi").innerHTML = "2101 bis 2300 und Vegetarier/in";
    } else if 
    ((zielzu > 2300 && zielzu < 2500) && (wei === "veget")) {
    document.getElementById("outiputi").innerHTML = "2301 bis 2500 und Vegetarier/in";
    } else if 
    ((zielzu > 2500 && zielzu < 2700) && (wei === "veget")) {
    document.getElementById("outiputi").innerHTML = "2501 bis 2700 und Vegetarier/in";
    } else if 
    ((zielzu > 2700 && zielzu < 2900) && (wei === "veget")) {
    document.getElementById("outiputi").innerHTML = "2701 bis 2900 und Vegetarier/in";
    } else if 
    ((zielzu > 2900 && zielzu < 3100) && (wei === "veget")) {
    document.getElementById("outiputi").innerHTML = "2901 bis 3100 und Vegetarier/in";
    } else if 
    ((zielzu > 3100 && zielzu < 3300) && (wei === "veget")) {
    document.getElementById("outiputi").innerHTML = "3101 bis 3300 und Vegetarier/in";
    } else if 
    ((zielzu > 3300 && zielzu < 3500) && (wei === "veget")) {
    document.getElementById("outiputi").innerHTML = "3301 bis 3500 und Vegetarier/in";
    } else if 
    ((zielzu > 3500 && zielzu < 3700) && (wei === "veget")) {
    document.getElementById("outiputi").innerHTML = "3501 bis 3700 und Vegetarier/in";
    } else if 
    ((zielzu > 1500 && zielzu < 1700) && (wei === "vegan")) {
    document.getElementById("outiputi").innerHTML = "1500 bis 1700 und Veganer/in";
    } else if 
    ((zielzu > 1700 && zielzu < 1900) && (wei === "vegan")) {
    document.getElementById("outiputi").innerHTML = "1701 bis 1900 und Veganer/in";
    } else if 
    ((zielzu > 1900 && zielzu < 2100) && (wei === "vegan")) {
    document.getElementById("outiputi").innerHTML = "1901 bis 2100 und Veganer/in";
    } else if 
    ((zielzu > 2100 && zielzu < 2300) && (wei === "vegan")) {
    document.getElementById("outiputi").innerHTML = "2101 bis 2300 und Veganer/in";
    } else if 
    ((zielzu > 2300 && zielzu < 2500) && (wei === "vegan")) {
    document.getElementById("outiputi").innerHTML = "2301 bis 2500 und Veganer/in";
    } else if 
    ((zielzu > 2500 && zielzu < 2700) && (wei === "vegan")) {
    document.getElementById("outiputi").innerHTML = "2501 bis 2700 und Veganer/in";
    } else if 
    ((zielzu > 2700 && zielzu < 2900) && (wei === "vegan")) {
    document.getElementById("outiputi").innerHTML = "2701 bis 2900 und Veganer/in";
    } else if 
    ((zielzu > 2900 && zielzu < 3100) && (wei === "vegan")) {
    document.getElementById("outiputi").innerHTML = "2901 bis 3100 und Veganer/in";
    } else if 
    ((zielzu > 3100 && zielzu < 3300) && (wei === "vegan")) {
    document.getElementById("outiputi").innerHTML = "3101 bis 3300 und Veganer/in";
    } else if 
    ((zielzu > 3300 && zielzu < 3500) && (wei === "vegan")) {
    document.getElementById("outiputi").innerHTML = "3301 bis 3500 und Veganer/in";
    } else if 
    ((zielzu > 3500 && zielzu < 3700) && (wei === "vegan")) {
    document.getElementById("outiputi").innerHTML = "3501 bis 3700 und Veganer/in";
    } else {
    document.getElementById("outiputi").innerHTML = "Keine Pläne vorhanden";
    }

Alles anzeigen

das sind 5128 Zeichen.

und so

JavaScript

var out;
if(wei=="alles"){
  if(zielzu > 1500 && zielzu < 1700){
     out="1500 bis 1700 und Allesesser";
  }else if(zielzu > 1700 && zielzu < 1900){
     out="1701 bis 1900 und Allesesser";
  }else if(zielzu > 1900 && zielzu < 2100){
     out="1901 bis 2100 und Allesesser";
  }else if(zielzu > 2100 && zielzu < 2300){
     out="2101 bis 2300 und Allesesser";
  }else if(zielzu > 2300 && zielzu < 2500){
     out="2301 bis 2500 und Allesesser";
  }else if(zielzu > 2500 && zielzu < 2700){
     out="2501 bis 2700 und Allesesser";
  }else if(zielzu > 2700 && zielzu < 2900){
     out="2701 bis 2900 und Allesesser";
  }else if(zielzu > 2900 && zielzu < 3100){
     out="2901 bis 3100 und Allesesser";
  }else if(zielzu > 3100 && zielzu < 3300){
     out="3101 bis 3300 und Allesesser";
  }else if(zielzu > 3300 && zielzu < 3500){
     out="3301 bis 3500 und Allesesser";
  }else if(zielzu > 3500 && zielzu < 3700){
     out="3501 bis 3700 und Allesesser";
  }
}else if(wei=="veget"){
  if(zielzu > 1500 && zielzu < 1700){
     out="1500 bis 1700 und Vegetarier/in";
  }else if(zielzu > 1700 && zielzu < 1900){
     out="1701 bis 1900 und Vegetarier/in";
  }else if(zielzu > 1900 && zielzu < 2100){
     out="1901 bis 2100 und Vegetarier/in";
  }else if(zielzu > 2100 && zielzu < 2300){
     out="2101 bis 2300 und Vegetarier/in";
  }else if(zielzu > 2300 && zielzu < 2500){
     out="2301 bis 2500 und Vegetarier/in";
  }else if(zielzu > 2500 && zielzu < 2700){
     out="2501 bis 2700 und Vegetarier/in";
  }else if(zielzu > 2700 && zielzu < 2900){
     out="2701 bis 2900 und Vegetarier/in";
  }else if(zielzu > 2900 && zielzu < 3100){
     out="2901 bis 3100 und Vegetarier/in";
  }else if(zielzu > 3100 && zielzu < 3300){
     out="3101 bis 3300 und Vegetarier/in";
  }else if(zielzu > 3300 && zielzu < 3500){
     out="3301 bis 3500 und Vegetarier/in";
  }else if(zielzu > 3500 && zielzu < 3700){
     out="3501 bis 3700 und Vegetarier/in";
  }     
}else if(wei=="vegan"){  
if(zielzu > 1500 && zielzu < 1700){
     out="1500 bis 1700 und Veganer/in";
  }else if(zielzu > 1700 && zielzu < 1900){
     out="1701 bis 1900 und Veganer/in";
  }else if(zielzu > 1900 && zielzu < 2100){
     out="1901 bis 2100 und Veganer/in";
  }else if(zielzu > 2100 && zielzu < 2300){
     out="2101 bis 2300 und Veganer/in";
  }else if(zielzu > 2300 && zielzu < 2500){
     out="2301 bis 2500 und Veganer/in";
  }else if(zielzu > 2500 && zielzu < 2700){
     out="2501 bis 2700 und Veganer/in";
  }else if(zielzu > 2700 && zielzu < 2900){
     out="2701 bis 2900 und Veganer/in";
  }else if(zielzu > 2900 && zielzu < 3100){
     out="2901 bis 3100 und Veganer/in";
  }else if(zielzu > 3100 && zielzu < 3300){
     out="3101 bis 3300 und Veganer/in";
  }else if(zielzu > 3300 && zielzu < 3500){
     out= "3301 bis 3500 und Veganer/in";
  }else if(zielzu > 3500 && zielzu < 3700){
    out="3501 bis 3700 und Veganer/in";
  } 
}else{
   out= "Keine Pläne vorhanden";
}
document.getElementById("outiputi").innerHTML=out;

Alles anzeigen

Nur noch 3006 Zeichen.

Du siehst das es schon einiges sparen kann und es übersichtlicher ist ( nicht getestet aber sollte so gehen )

Du wunderst dich warum du immer das letzte bekommst bei dein else .?

Hast du mal das eingebaut ,vor den else if Zweig ?

Code

console.log(zielzu+''+wei)

Dann bekommst du NaN bei wei raus.

wei ist deine Variable die das select Feld "Ernährungsweise" abfragen tut.

Da hast du das gemacht

Code

var wei = parseInt(document.getElementById('weise2').value);

weiter Nachricht 2

basti1012 · 6. März 2020

Nachricht 2

So. Jetzt Googel mal was parseInt() macht und du wirst erfahren das du das da nicht gebrauchen kannst.

Ob das jetzt der einzige Fehler ist weiß ich nicht , aber das ist das, was mir auf der schnelle aufgefallen ist.

Habe aber auch noch nicht alle durch gescheckt was du da berechnen tust .

Ich denke mal das man das alles mit der Hälfte an Code auch hinbekommen tut.

Wenn du Lust hast, dann erklär mal kurz was du da genau berechnen willst ,

vielleicht kann man dann den ganzen Code mal neu machen und mindestens 200 Zeilen Code daraus schmeißen.

Irgendwie kann ich in den Feldern eingeben, was ich will,ich komme mit den Ergebnis nie höher als 400 und somit trifft auch kein else zu

Habe das mal bei Codepen reinkopiert damit die anderen Leute das auch sehen können die keine Dateien hier herunterladen.

https://basti1012.bplaced.net/…rdner=html-seminar&id=421

Denk dran das du da noch einige parseint raus machen mußt .

Ich habe da jetzt noch nix dran geändert, weil du sollst ja auch was lernen und selber versuchen.

Aber helfen tue ich dir trotzdem, wenn du nicht weiter kommst

dzydzy · 6. März 2020

Hi Basti

Wow! Ich danke dir!!!

zu 1. Cooler Tipp, kannte ich gar nicht! Mir ist bewusst, dass ich extrem viel Code habe, der nicht sein müsste.. wie gesagt, bin so neu dabei und habe mich schon immens gebessert, sauberer zu schreiben.. aber mir ist definitiv bewusst, dass da noch viel Verbesserungspotenzial vorhanden ist.

Gott, das mit

Code

var = out;
if (....

Ist so naheliegend aber so entfernt! Das wird mir definitiv nicht mehr passieren

2. Das ist ja schon fast peinlich... ich weiss, was parseInt macht, aber habe nicht sauber gearbeitet, sondern von oben kopiert...

Ich bin froh, dass du mir den Code nicht fertig präsentierst. Denn so habe ich vieles bisher super selbst gelernt, idem ich es selber korrigiert habe.

Ich werde mal die Anpassungen vornehmen und schauen, was da rauskommt. Das ist komisch, bei mir kommen realistische Zahlen (Grundumsatz immer mind. 1400kcal oder so und bei der Zielzufuhr immer über 2000kcal, halt je nach Input.

basti1012 · 6. März 2020

bei den Kcal bekomme ich auch immer 2000 und mehr raus.

Aber bei den else zweig bekomme ich bei deinen Variabel

zielzu nicht mehr als 400 raus und deswegen kann auch keine else if greifen .

Und hier sind auch noch Fehler.

Vieleicht fällt es dir ja auf

Code

    var ge = parseInt(document.getElementById('gewicht2').value);
    var al = parseInt(document.getElementById('gewicht2').value);
    var ge = parseInt(document.getElementById('geschlecht2').value);
    var ge1 = (geschlecht === '2') ? 655.1 : 66.47 ;

Das kann so auch nicht richtig funktionieren.

An besten schmeißt du fast alles bei der funktion holeplan() raus, weil du das oben bei der berechnung schon alles gemacht hast.

Wenn du neigirig bist dann kucke bei meinen Link , ansonsten versuche es selber mal wie ich das meine.

Bei mir passt jetzt auch das Ergebniss und co

Stef · 6. März 2020

dzydzy : Willkommen hier im Forum. Poste bitte deinen Code zukünftig in die dafür vorgesehenen CodeTags (</>) ! Vielen Dank

Schöne Grüße

basti1012 · 6. März 2020

Du könntest deinen else Zweig nochmal um 2000 Zeilen kürzen.

Endergebniss würde dann so aussehen

Code

var erg=[1500,1700,1900,2100,2300,2500,2700,2900,3100,3300,3500,3700];
for(g=0;g<14;g++){
  if(zielzu > erg[g] && zielzu < erg[g+1]){
     out=erg[g]+' bis '+erg[g+1]+' und '+wei;
  }
}
if(zielzu > 3700 || zielzu < 1500){
   out="Keine Pläne vorhanden";
}
document.getElementById("outiputi").innerHTML=out;
}

Alles anzeigen

Oder sehe bei Codepen.

Was soll eigentlich das setInterval machen ? weil er auch auf 100ms steht ?

Dein html passt auch nicht ganz, da werden die div und spans nicht richtig geschlossen

dzydzy · 6. März 2020

Zitat von basti1012
bei den Kcal bekomme ich auch immer 2000 und mehr raus.

Aber bei den else zweig bekomme ich bei deinen Variabel

zielzu nicht mehr als 400 raus und deswegen kann auch keine else if greifen .

Und hier sind auch noch Fehler.

Vieleicht fällt es dir ja auf
Code
    var ge = parseInt(document.getElementById('gewicht2').value);
    var al = parseInt(document.getElementById('gewicht2').value);
    var ge = parseInt(document.getElementById('geschlecht2').value);
    var ge1 = (geschlecht === '2') ? 655.1 : 66.47 ;
Das kann so auch nicht richtig funktionieren.

An besten schmeißt du fast alles bei der funktion holeplan() raus, weil du das oben bei der berechnung schon alles gemacht hast.

Wenn du neigirig bist dann kucke bei meinen Link , ansonsten versuche es selber mal wie ich das meine.

Bei mir passt jetzt auch das Ergebniss und co
Alles anzeigen

Ach herrjeee... Mein Fazit: Ich arbeite zu unsauber..... die bei var al angesteuerte Id ist 'gewicht2'

Das mit den vorher definierten var's habe ich auch gedacht, da var ja globale Variabeln sind, jedoch hat es irgendwie nicht funktioniert... vielleicht auch, weil sonst was im Code nicht stimmte Danke dir !

dzydzy · 6. März 2020

Zitat von Stef

dzydzy : Willkommen hier im Forum. Poste bitte deinen Code zukünftig in die dafür vorgesehenen CodeTags (</>) ! Vielen Dank

Schöne Grüße

Vielen Dank!

Wollte ich zuerst, jedoch war der Code zu lang. basti1012 hat mir aber den guten Tipp mit Codepen gegeben.

Viele Grüsse

dzydzy · 6. März 2020

Zitat von basti1012
Du könntest deinen else Zweig nochmal um 2000 Zeilen kürzen.

Endergebniss würde dann so aussehen
Code
var erg=[1500,1700,1900,2100,2300,2500,2700,2900,3100,3300,3500,3700];
for(g=0;g<14;g++){
  if(zielzu > erg[g] && zielzu < erg[g+1]){
     out=erg[g]+' bis '+erg[g+1]+' und '+wei;
  }
}
if(zielzu > 3700 || zielzu < 1500){
   out="Keine Pläne vorhanden";
}
document.getElementById("outiputi").innerHTML=out;
}
Alles anzeigen
Oder sehe bei Codepen.

Was soll eigentlich das setInterval machen ? weil er auch auf 100ms steht ?

Dein html passt auch nicht ganz, da werden die div und spans nicht richtig geschlossen
Alles anzeigen

Wow! Das ist heftig! Ich muss mich noch weiter in JS einarbeiten bzw. was dieser Code genau bedeutet und wie es funktioniert. Ganz so wird es nicht gehen, da ich schlussendlich will, dass der richtige Ernährungsplan angezeigt wird (ohne '1500 bis 1700 und Alles'). Da würde ich für jeden möglich Plan einen Div Block erstellen und mit document.getElementById("ID DES ERNÄHRUNGSPLANS").style.display = "inline-block"; arbeiten. Oder gibt es da eine einfachere Variante?

Es wird ein Bild und ein Button sein, der auf eine andere URL Seite verweist.

Der setInterval soll in sehr kleinen Schritten das Ergebnis bei "Total Stunden (ohne Sport):" automatisch aktualisieren, damit man sofort sieht, wie viele Stunden man eingetragen hat, damit man auf 24h kommt (ohne zuerst auf Berechnen zu klicken)

basti1012 · 6. März 2020

Zitat von dzydzy

Der setInterval soll in sehr kleinen Schritten das Ergebnis bei "Total Stunden (ohne Sport):" automatisch aktualisieren, damit man sofort sieht, wie viele Stunden man eingetragen hat, damit man auf 24h kommt (ohne zuerst auf Berechnen zu klicken)

du meinst das so ?

Wenn man in den Feldern neue Werte eingeben tut , sollen die ergebnisse gleich angezeigt werden i

ohne das man berechnen klickt ?

Dafür gibt es den change oder keypüress ,keyup Event was auf Tastendruck oder so das Ergebniss dann errechnen würde.

Solche Tasten oder change Events sind perdormance Technischer besser als ein Interval laufen zu lassen .

Deine Css könnte man auch noch anders machen.

Zitat von dzydzy

Wow! Das ist heftig! Ich muss mich noch weiter in JS einarbeiten bzw. was dieser Code genau bedeutet und wie es funktioniert. Ganz so wird es nicht gehen, da ich schlussendlich will, dass der richtige Ernährungsplan angezeigt wird (ohne '1500 bis 1700 und Alles'). Da würde ich für jeden möglich Plan einen Div Block erstellen und mit document.getElementById("ID DES ERNÄHRUNGSPLANS").style.display = "inline-block"; arbeiten. Oder gibt es da eine einfachere Variante?

an besten zeigst du mir mal da ein beispiel , wie du das genau meinst.

Aber wie du jetzt schon sehen kannst gibt es da bestimmt auch einfachere LÖösung.

Aufjedefall mußt du dir Javascript noch gut ankucken.

Du siehst ja das ich fast 90% deines Codes schon auskommentiert habe weil es auch einfacher geht mit wenniger Code

Verschachtelte If Else Funktionn gibt mir immer nur letzte Else zurück

Jetzt mitmachen!

Teilen

Tags