Iterieren von Monaten und Tagen in zwei verschiedenen Auswahl/Option

Question

Grundsätzlich versuche ich ein Element wählen die zwölf Monate des Jahres, und abhängig von dem Monat, der angezeigt wird, für ein anderes Auswahlelement, um die Anzahl von anzuzeigen Tage in diesem Monat. , d. H. Wenn im ersten Auswahlelement Januar gewählt wird, zeigt das zweite Auswahlelement die Tage 1 bis 30. Wenn November gewählt wird, zeigt das zweite Auswahlelement stattdessen die Tage 1 bis 31 und so weiter an.

HTML:

<select type="text" id="month"></select> 

<label>Days:</label> 
<select type="text" id="day" onchange="checkMonth(this.value)"></select> 

Variablen:

var months =["JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER"]; 
var month = document.getElementById('month'); 
var day  = document.getElementById('day'); 

JavaScript:

for(var index in month) { 
    month.options[month.options.length] = new Option(month[index], index); 
} 

if (month.val() === months[3] || months[5] || months[8] || months[10]){ 
    var numOfDays = 30; 

    for(var i = 1; i <= numOfDays; i++) { 
     for(i in day) { 
      day.options[day.options.length] = new Option(day[i], i); 
     } 
    } 
} 
else if (month.val() === months[0] || months[2] || months[4] || months[6] || months[7] || months[9] || months[11]) { 
    var numOfDays = 31; 

    for(var i = 1; i <= numOfDays; i++) { 
     for(i in day) { 
      day.options[day.options.length] = new Option(day[i], i); 
     } 
    } 
} 
else { 
    var numOfDays = 28; 

    for(var i = 1; i <= numOfDays; i++) { 
     for(i in day) { 
      day.options[day.options.length] = new Option(day[i], i); 
     } 
    } 
} 

Fragen: Wie kann ich dies tun und ist mein Code falsch?

Answer 1

Zunächst fehlt Ihrem JavaScript-Code Event-Listener. Dies bedeutet, dass Ihr Javascript nur einmal ausgeführt wird, und danach ist es ein ungültiger Code. Das System kann nicht automatisch erraten, dass ein Teil des Codes ausgeführt werden soll, wenn eines der Kontrollkästchen aktiviert ist. Sie müssen es angeben. Der Versuch, den Code in einem Onload-Status auszuführen, kann zu Fehlern führen.

Also Schritt 1, ist es, Ihre Update-Funktionalität für die Tagesauswahl-Box, in seiner eigenen Funktion zu wickeln. Nennen wir es function updateDays() das sollte direkt vor Ihrer ersten if-Anweisung hinzugefügt werden. Halte Klammern fest!

Schritt 2 ist, um Ihre Population der Monatauswahlbox zu beheben. Die Monate wird sich nie ändern, also würde ich einfach schwer, sie in den HTML-Code, sondern aus Gründen der Ihren Code nicht mehr als nötig zu ändern, hier ist das, was Sie tun müssen:

• die am for(var index in month) Werfen wir einen Blick zuerst. Ich vermute, dass Sie das Array der Monatsnamen durchlaufen und sie als Optionen zum Auswahlfeld hinzufügen möchten. Hier scheint es, als ob Sie month mit months obwohl verwirrt haben. Ersetzen Sie die Variablennamen, gibt Ihnen 12 Optionen im Dropdown, aber sie haben bisher keinen Inhalt. Sie haben jedoch Werte von 0 bis 11, die bei der Suche nach den Tagen Ihren erwarteten Werten entsprechen.
• Noch einmal scheint es, als ob Sie month mit months verwechselt haben. die Variablennamen zu ändern, füllt nun erfolgreich die Monat-select:

falsche Linie:

month.options[month.options.length] = new Option(month[index], index); 

richtige Line:

month.options[month.options.length] = new Option(months[index], index); 

Schritt 3 ist das System zu informieren, die aktualisieren Tagesauswahlfeld, wenn die Monatsauswahl geändert wurde. Um dies zu tun, müssen wir eine Listener-Funktion, in diesem Fall einen Wechsel Zuhörer hinzu:

month.addEventListener('change', updateDays); 

Natürlich wollen wir die updateDays einmal am Anfang als auch laufen, wenn die Drop-Down-bis Januar gesetzt , so nennen wir es einmal auch hier:

updateDays(); 

Schritt 4 ist Ihre updateDays Fixierung() - Funktion.Es hat mehrere, was Sie verbessern sollte, aber ich werde über den klaren Fehler, den Sie gemacht haben zuerst sprechen:

if (month.val() === months[3] || months[5] || months[8] || months[10]){ 

zunächst einmal, ich glaube nicht, dass Sie den Wert abrufen können einfach durch den Aufruf month.val (). Zweitens, wenn Sie den Operator OR|| verwenden, sollten Sie wissen, dass JavaScript auf diese Weise nicht funktioniert. Um zu erreichen, was Sie wollen, müssen Sie beide Seiten des gleichen Operators zwischen jedem ODER-Operator haben. Beispiel:

value === check1 || check2 || check3 || check4 //wrong 
value === check1 || value === check2 || value === check3 //correct 

Ihr Code prüft einfach einmal, wenn der Wert "APRIL". Wenn nicht, prüft es einfach, ob "JUNI" wahr ist. JavaScript ist so konzipiert, dass es bei der Überprüfung einer solchen Zeichenfolge den Wert true zurückgibt, wenn es existiert. Mit anderen Worten, Ihre aktuelle Funktionalität würde IMMER 30 zurückgeben, weil die Zeichenfolge "JUNE" immer existieren würde.

Schritt 5 besteht darin, die Funktion zu reparieren, die das Tag-Drop-Down füllt. Ich muss zugeben, ich habe nicht ganz verstanden, was Sie dort zu tun versuchten, also habe ich das Ganze neu geschrieben. Am Ende ist das, was hier Ihr Javascript-Code aussehen könnte:

diesen

var months = ["JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER"]; 
var month = document.getElementById('month'); 
var day = document.getElementById('day'); 

for (var index in months) { 
    month.options[month.options.length] = new Option(months[index], index); 
} 

month.addEventListener('change', updateDays); 

updateDays(); 

function updateDays() { 
    var month = document.getElementById('month'); 
    var value = month.options[month.selectedIndex].text; 
    if (value === months[3] || value === months[5] || value === months[8] || value === months[10]) { 
    var numOfDays = 30; 
    } else if (value === months[0] || value === months[2] || value === months[4] || value === months[6] || value === months[7] || value === months[9] || value === months[11]) { 
    var numOfDays = 31; 
    } else { 
    var numOfDays = 28; 
    } 

    for (var i = 1; i <= numOfDays; i++) { 
    day.options[day.options.length] = new Option(i, i); 
    } 
} 

Check-out, es in Aktion zu sehen: https://jsfiddle.net/o6n6k1s8/

Mein heißer Tipp für Sie als Entwickler, ist mehr zu erfahren darüber, wie Sie Fehler in Ihrer Anwendung debuggen können. Obwohl es viele verschiedene Fehler gab, waren die meisten von ihnen sehr klein, und Sie hatten die allgemeine Idee richtig. Wenn Sie lernen, Ihre eigenen spezifischen Fehler zu finden, werden Sie ein großartiger Programmierer sein. Google-Themen wie Chrome Inspector oder Mozilla Firebug.

Und viel Glück