Итерировать месяцы и дни в двух разных вариантах выбора/опции

Question

В принципе, я пытаюсь, чтобы один элемент select повторял двенадцать месяцев года, и в зависимости от месяца, который показан, для другого элемента выбора, чтобы отобразить число дней в этом месяце. т. Е. Если в первом элементе выбора выбран январь, тогда второй элемент выбора отобразит дни с 1 по 30. Если будет выбран ноль, то второй элемент выбора будет отображать дни от 1 до 31 и так далее.

HTML:

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

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

Переменные:

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); 
     } 
    } 
} 

Вопросы: Как я могу сделать это и мой код не так?

Answer 1

Прежде всего, в вашем javascript-коде отсутствуют прослушиватели событий. Это означает, что ваш javascript просто выполняется один раз, а затем он является мертвым кодом. Система не может автоматически угадать, что вы хотите запустить какой-либо код, когда выбран один из этих флажков. Вы должны указать его. Попытка запустить код в состоянии onload может привести к ошибкам.

Таким образом, шаг 1 - обернуть функциональность обновления для блока выбора дня, в его собственной функции. Назовем это function updateDays(), это должно быть добавлено непосредственно перед вашим первым if-statement. Помните скобки!

Шаг 2 - исправить ваше население в поле выбора месяца. Месяцы никогда не изменятся, так что я просто жестко закодировать их в HTML, но ради не меняя код более необходимого, вот что вам нужно сделать:

• Давайте посмотрим на for(var index in month) первый. Я предполагаю, что вы хотите перебирать массив имен месяцев и добавлять их в поле выбора в качестве параметров. Здесь, похоже, вы путаете month с months. заменяя имена переменных, дает вам 12 вариантов в раскрывающемся списке, но до сих пор они не имеют содержимого. Однако они имеют значения от 0-11, что, похоже, соответствует вашим ожидаемым значениям при поиске дней.
• Еще раз, кажется, вы путаете month с months. изменив имя переменной, успешно заселяет месяц-выберите:

неверная строка:

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

правильная линия:

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

Шаг 3 должен позволить системе знать, чтобы обновить days-selection box, всякий раз, когда происходит изменение в выборе месяца. Чтобы сделать это, мы должны добавить функцию слушателя, в этом случае переключающий слушателя:

month.addEventListener('change', updateDays); 

Конечно мы хотим updateDays запустить один раз в начале, а, когда выпадающий установлен в январе , поэтому мы также называем это здесь:

updateDays(); 

Шаг 4 фиксирует вашу функцию updateDays() - функцию.Она имеет несколько вещь, которую вы должны улучшить, но я буду говорить об очевидном заблуждении вы сделали первый:

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

первую очередь, я не думаю, что вы можете получить значение просто позвонив по телефону month.val (). Во-вторых, когда вы используете OR оператор ||, вы должны знать, что javascript не работает таким образом. Чтобы достичь того, чего вы хотите, вам придется иметь обе стороны равного оператора между каждым оператором OR. Образец:

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

Ваш код просто проверяет один раз, если значение «APRIL». если это не так, он просто проверяет, истинно ли значение «ИЮНЬ». Javascript разработан таким образом, что при проверке такой строки он возвращает true, если он существует. Другими словами, ваша текущая функциональность ВСЕГДА вернет 30, потому что строка «JUNE» всегда существовала.

Этап 5 заключается в том, чтобы зафиксировать функцию, заполняющую дневной снимок. Должен признаться, я не совсем понял, что вы пытались сделать там, поэтому я переписал все это. В конце концов, вот что ваш Javascript код может выглядеть следующим образом:

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); 
    } 
} 

Проверьте это, чтобы увидеть его в действии: https://jsfiddle.net/o6n6k1s8/

Мой горячий совет для вас как разработчика, является, чтобы узнать больше о том, как отлаживать ошибки в вашем приложении. Несмотря на то, что было много разных ошибок, большинство из них были очень маленькими, и у вас была общая идея. Если вы узнаете, как найти свои собственные ошибки, вы станете отличным программистом. Такие темы Google, как chrome inspector или mozilla firebug.

И удачи