Календарь, почему не работают элементы управления?

Question

Есть скрипт календаря, исправила вывод таблиц, перестали работать элементы управления в шапке календаря. Как исправить чтобы элементы управления работали?

Как добавить год в поле ввода и вывести одну таблицу, при клике на кнопку изменить класс таблицы?

var calendar = {
  update: function (year, month) {
    this.year = year;
    this.month = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь',][month];
    var startDay = new Date(year, month, 1);
    var offsetDay = (startDay.getDay() || 7) - 1;
    startDay.setDate(startDay.getDate() - offsetDay);
    var lastDay = new Date(startDay);
    var days = new Date(year, month + 1, 0).getDate();
    days = Math.ceil((days + offsetDay) / 7) * 7;
    lastDay.setDate(lastDay.getDate() + days);
    this.data = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
    while (startDay < lastDay) {
      this.data.push(startDay.getDate());
      startDay.setHours(24);
    }
  },
  render: function (horiz) {
    var html = '';
    if (horiz) {

      this.element.classList.add("horiz");
      for (var i = 0, j = 0; i < this.data.length; j = ++i % 7) {
        if (j == 0) html += '<tr class="week">';
        html += '<td class="day">' + this.data[i] + '</td>';
        if (j == 6) html += '</td>';
      }
    } else {
      html = ['<tr class="week_day">', '<tr>', '<tr>', '<tr>', '<tr>', '<tr>', '<tr>'];
      for (var i = 0; i < this.data.length; i++) {
        html[i % 7] += '<td class="day">' + this.data[i];
      }
      html = html.join('')
    }

    this.numYear.textContent = this.year;
    this.monthName.textContent = this.month;
    this.element.innerHTML = html;
  },
};
var today = new Date(),
  thisYear = today.getFullYear(),
  thisMonth = today.getMonth();
calendar.days = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
calendar.numYear = document.querySelector('#num_year');
calendar.monthName = document.querySelector('#month_name');
calendar.element = document.querySelector('.table_month_vert');
calendar.update(thisYear, thisMonth);
calendar.render(true);
calendar.element = document.querySelector('.table_month_horiz');
calendar.render();

//Запрашивается селектор по тегу select. Добавляются месяца.
selector = document.querySelector('select');
month_list = ['Январь', 'Февраль', 'Март', 'Апрель', ' Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'];
for (var i = 0; i < month_list.length; i++) {
  selector.options[i] = new Option(month_list[i], i);
}
selector.selectedIndex = thisMonth;

//Это для того, чтобы менять календарь при изменении месяца и года
selector.addEventListener('change', load);
document.querySelector('.year_input').addEventListener('change', load);


calendar.element = document.querySelector('.month');
document.getElementById('month_rotate').addEventListener('click', function () {
  calendar.toggle();
});

//Вынесена загрузка в отдельную функцию.
function load() {
  var year = document.getElementById('year_input').value;
  var month = selector.selectedIndex;
  calendar.update(year, month);
  calendar.render();
}

//при зыгрузке страницы вызывается тот же обработчик
document.addEventListener("DOMContentLoaded", () => {
  document.querySelector('.year_input').value = thisYear;
  load();
});

#navigation_panel {
                white-space: nowrap;
                border: 1px solid hsl(0, 0%, 50%);
                border-radius: 6px;
                padding: 5px 15px;
                margin: 0 0 5px;
            }
            
            input {
                width: 56px;
                display: inline-block;
                text-align: center;
                border: 1px solid hsl(210, 100%, 50%);
            }
            
            .table_rotate {
                border: 1px solid hsl(210, 100%, 50%);
                border-radius: 12px 12px 0 12px;
                background-color: hsl(210, 100%, 90%);
                color: hsl(210, 100%, 50%);
            }
            
            select {
                border: 1px solid hsl(210, 100%, 50%);
                background-color: hsl(210, 100%, 90%);
                color: hsl(210, 100%, 50%);
            }
            
            .table_month_horiz,
            .table_month_vert {
                width: 250px;
                height: 250px;
                border: 1px solid hsl(0, 0%, 50%);
                border-radius: 6px;
            }
            
            td {
                border: 1px solid hsl(0, 0%, 50%);
                border-radius: 6px;
                text-align: center;
                font: 14px serif;
            }
    
            #num_year,
            #month_name {
                background-color: hsl(210, 100%, 95%);
                color: hsl(210, 100%, 50%);
                font: bold 18px serif;
                text-align: center;
            }
    
            #num_year {
                width: 250px;
                border: 1px solid hsl(0, 0%, 50%);
                border-radius: 4px;
                padding: 5px;
                margin: 0 0 5px;
            }
    
            #month {
                display: inline-block;
                border: 1px solid hsl(0, 0%, 50%);
                border-radius: 8px;
                padding: 5px;
                width: 250px;
            }
    
            #month_name {
                border: 1px solid hsl(0, 0%, 50%);
                border-radius: 4px;
                padding: 5px;
                margin: 0 0 5px;
            }
    
            .table_month_vert,
            .table_month_horiz {
                table-layout: fixed;
                width: 100%;
                height: 250px;
                border-spacing: 3px;
            }
    
            .table_month_horiz tr td:nth-child(1) {
                width: 20%;
                background-color: hsl(210, 100%, 88%);
                color: hsl(210, 100%, 50%);
                font-weight: bold;
            } /* названия будних дней недели */
            
            .table_month_horiz tr:nth-child(n+6) td:nth-child(1) {
            width: 20%;
            background-color: hsl(348, 100%, 88%);
            color: hsl(348, 100%, 50%);
            font-weight: bold;
            } /* названия выходных дней недели */
            
            .table_month_horiz tr td:nth-child(n+2) {
            width: 20%;
            background-color: hsl(210, 100%, 95%);
            color: hsl(210, 100%, 50%);
            } /* будниe */
            
            .table_month_horiz tr:nth-child(n+6) td:nth-child(n+2) {
            width: 20%;
            background-color: hsl(348, 100%, 95%);
            color: hsl(348, 100%, 50%);
            } /* выходныe */
            
            .table_month_vert tr:nth-child(1) td.day {
                background-color: hsl(210, 100%, 88%);
                color: hsl(210, 100%, 50%);
                font-weight: bold;
            } /* названия будних дней недели */
            
            .table_month_vert tr:nth-child(1) td.day:nth-child(n+6) {
            background-color: hsl(348, 100%, 88%);
            color: hsl(348, 100%, 50%);
            font-weight: bold;
            } /* названия выходных дней недели */
            
            .table_month_vert tr:nth-child(n+2) td.day {
            background-color: hsl(210, 100%, 95%);
            color: hsl(210, 100%, 50%);
            } /* будниe */
            
            .table_month_vert tr:nth-child(n+2) td.day:nth-child(n+6) {
            background-color: hsl(348, 100%, 95%);
            color: hsl(348, 100%, 50%);
            } /* выходныe */

<div id="num_year"></div>
<div id="month">
    <div id="navigation_panel">
    <select id="select_month"></select>
    <input class="year_input" type="number" value="">
    <button class="table_rotate">➘</button>
    </div>
    <div id="month_name"></div> 
    <table class="table_month_horiz"></table>
    <table class="table_month_vert"></table> 
</div>

Answer 1

Комментарии внутри кода

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Calendar</title>
    </head>
    <body>
    <style type="text/css">
      #navigation_panel { 
        border: 1px solid hsl(0,0%,66%);
        padding: 5px 10px;
      }
      .month,
      .month.vert .week,
      .day {
        display: inline-block;
      }
      .month.vert .day {
        display: block;
      }
      .day {
        border: 1px solid hsl(0,0%,66%);
        width: 30px;
        line-height: 30px;
        text-align: center;
        margin: 2px;
        background-color: hsl(210,100%,90%);
        color: hsl(210,100%,50%);
      }
      .day:nth-child(7n + 6), .day:nth-child(7n + 7) {
        background-color: hsl(348,100%,90%);
        color: hsl(348,100%,50%);
      }
      input { 
        border: 1px solid hsl(0,0%,66%);
        width: 54px;
        display: inline-block;
        text-align: center;
      }
    </style>
        <div id="navigation_panel">
        <select id="month_select"></select> 
        <input id='year_input' type="number" size="4" value="5"/> 
        <button id="month_rotate">▶</button>
        </div>
        <div class="month vert"></div>
        <script>
          var calendar = {
            update: function(year, month) {
              this.days.length = 7;
              var stepDay = new Date(year, month, 1);
              stepDay.setDate(stepDay.getDate() + 0 - ((stepDay.getDay() + 6) % 7));
              var lastDay = new Date(year, month + 1, 0);
              lastDay.setDate(lastDay.getDate() + 6 - ((lastDay.getDay() + 6) % 7));
              while (stepDay <= lastDay) {
                this.days.push(stepDay.getDate());
                stepDay.setHours(24);
              }
            },
            render: function() {
              var html = '';
              for (var i = 0, j = 0; i < this.days.length; j = ++i % 7) {
                if (j == 0) html += '<div class="week">';
                html += '<div class="day">' + this.days[i] + '</div>';
                if (j == 6) html += '</div>';
              }
              this.element.innerHTML = html;
            },
            toggle: function() {
              this.element.classList.toggle('vert');
            },
          };
          var today = new Date(),
            thisYear = today.getFullYear(),
            thisMonth = today.getMonth();
          calendar.days = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
          
          //Запрашивается селектор по тегу select. Добавляются месяца. 
          //Но желательно это сделать отдельно и в html, а не в коде js
          selector = document.querySelector('select');
          month_list = ['Январь', 'Февраль', 'Март', 'Апрель', ' Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Декабрь'];
          for (let i = 0; i < month_list.length; i++){
            selector.options[i] = new Option(month_list[i], i);
          }
          selector.selectedIndex = thisMonth;
          
          //Это для того, чтобы менять календарь при изменении месяца и года
          selector.addEventListener('change', load);
          document.getElementById('year_input').addEventListener('change', load);
          
          
          calendar.element = document.querySelector('.month');
          document.getElementById('month_rotate').addEventListener('click', function() {
            calendar.toggle();
          });
          
          //Вынесена загрузка в отдельную функцию, часто вызывается
          //кстати был добавлен id у input поля, это лучше (inho), вдруг inputов будет много
          //то же, наверное, и для года надо бы сделать
          function load(){
              let year = document.getElementById('year_input').value;
              let month = selector.selectedIndex;
              calendar.update(year, month);
              calendar.render();
          }
          //при зыгрузке страницы вызывается тот же обработчик
          document.addEventListener("DOMContentLoaded", ()=>{
            document.getElementById('year_input').value = thisYear;
            load();
          });
          
          
        </script>
    </body>
</html>

Answer 2

<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #navigation_panel {
            white-space: nowrap;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 6px;
            padding: 5px 15px;
            margin: 0 0 5px;
        }
        
        input {
            width: 56px;
            display: inline-block;
            text-align: center;
            border: 1px solid hsl(210, 100%, 50%);
        }
        
        #table_rotate {
            border: 1px solid hsl(210, 100%, 50%);
            border-radius: 12px 12px 0 12px;
            background-color: hsl(210, 100%, 90%);
            color: hsl(210, 100%, 50%);
        }
        
        select {
            border: 1px solid hsl(210, 100%, 50%);
            background-color: hsl(210, 100%, 90%);
            color: hsl(210, 100%, 50%);
        }
        
        .table_month_horiz,
        .table_month_vert {
            width: 250px;
            height: 250px;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 6px;
        }
        
        td {
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 6px;
            text-align: center;
            font: 14px serif;
        }

        #num_year,
        #month_name {
            background-color: hsl(210, 100%, 95%);
            color: hsl(210, 100%, 50%);
            font: bold 18px serif;
            text-align: center;
        }

        #num_year {
            width: 250px;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 4px;
            padding: 5px;
            margin: 0 0 5px;
        }

        #month {
            display: inline-block;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 8px;
            padding: 5px;
            width: 250px;
        }

        #month_name {
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 4px;
            padding: 5px;
            margin: 0 0 5px;
        }

        .table_month_vert,
        .table_month_horiz {
            table-layout: fixed;
            width: 100%;
            height: 250px;
            border-spacing: 3px;
        }

        .table_month_horiz tr td:nth-child(1) {
            width: 20%;
            background-color: hsl(210, 100%, 88%);
            color: hsl(210, 100%, 50%);
            font-weight: bold;
        } /* названия будних дней недели */
        
        .table_month_horiz tr:nth-child(n+6) td:nth-child(1) {
        width: 20%;
        background-color: hsl(348, 100%, 88%);
        color: hsl(348, 100%, 50%);
        font-weight: bold;
        } /* названия выходных дней недели */
        
        .table_month_horiz tr td:nth-child(n+2) {
        width: 20%;
        background-color: hsl(210, 100%, 95%);
        color: hsl(210, 100%, 50%);
        } /* будниe */
        
        .table_month_horiz tr:nth-child(n+6) td:nth-child(n+2) {
        width: 20%;
        background-color: hsl(348, 100%, 95%);
        color: hsl(348, 100%, 50%);
        } /* выходныe */
        
        .table_month_vert tr:nth-child(1) td.day {
            background-color: hsl(210, 100%, 88%);
            color: hsl(210, 100%, 50%);
            font-weight: bold;
        } /* названия будних дней недели */
        
        .table_month_vert tr:nth-child(1) td.day:nth-child(n+6) {
        background-color: hsl(348, 100%, 88%);
        color: hsl(348, 100%, 50%);
        font-weight: bold;
        } /* названия выходных дней недели */
        
        .table_month_vert tr:nth-child(n+2) td.day {
        background-color: hsl(210, 100%, 95%);
        color: hsl(210, 100%, 50%);
        } /* будниe */
        
        .table_month_vert tr:nth-child(n+2) td.day:nth-child(n+6) {
        background-color: hsl(348, 100%, 95%);
        color: hsl(348, 100%, 50%);
        } /* выходныe */

    </style>
</head>

<body>
    <div id="num_year"></div>
    <div id="month">
        <div id="navigation_panel">
        <select id="select_month"></select>
        <input id="year_input" type="number" value="">
        <button id="table_rotate">➘</button>
        </div>
        <div id="month_name"></div> 
        <table class="table_month_horiz"></table>
        <table class="table_month_vert"></table> 
    </div>
    <script>
        var calendar = {
            type: 'horiz',
            element: document.querySelector('.table_month_vert'),
            
            update: function(year, month) {
                this.year = year;
                this.month = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь', ][month];
                var startDay = new Date(year, month, 1);
                var offsetDay = (startDay.getDay() || 7) - 1;
                startDay.setDate(startDay.getDate() - offsetDay);
                var lastDay = new Date(startDay);
                var days = new Date(year, month + 1, 0).getDate();
                days = Math.ceil((days + offsetDay) / 7) * 7;
                lastDay.setDate(lastDay.getDate() + days);
                this.data = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
                while (startDay < lastDay) {
                    this.data.push(startDay.getDate());
                    startDay.setHours(24);
                }
            },
            
            render2: function(horiz) {
                var html = '';
                if (horiz) {

                    this.element.classList.add("horiz");
                    for (var i = 0, j = 0; i < this.data.length; j = ++i % 7) {
                        if (j == 0) html += '<tr class="week">';
                        html += '<td class="day">' + this.data[i] + '</td>';
                        if (j == 6) html += '</td>';
                    }
                } else {
                    html = ['<tr class="week_day">', '<tr>', '<tr>', '<tr>', '<tr>', '<tr>', '<tr>'];
                    for (var i = 0; i < this.data.length; i++) {
                        html[i % 7] += '<td class="day">' + this.data[i];
                    }
                    html = html.join('')
                }

                this.numYear.textContent = this.year;
                this.monthName.textContent = this.month;
                this.element.innerHTML = html;
            },
            render: function() {
                var html = '';
                //ЗДЕСЬ ВЫ ТОЖЕ, ВИДИМО, ПЕРЕПУТАЛИ. 
                //HORIZ - НЕ ЗА ГОРИЗОНТ. ОТВЕЧАЛ, А ЗА ВЕРТ.
                if (this.type == 'vert') {
                    //так как рендер горизонтального календаря
                    //очищаем вертикальный и ставим element = горизонтальный
                    
                    this.element.innerHTML = '';
                    this.element = document.querySelector('.table_month_vert');
                    this.element.classList.add("horiz");
                    
                    for (var i = 0, j = 0; i < this.data.length; j = ++i % 7) {
                        if (j == 0) html += '<tr class="week">';
                        html += '<td class="day">' + this.data[i] + '</td>';
                        if (j == 6) html += '</td>';
                    }
                } else {
                    //так как рендер вертикального календаря
                    //очищаем горизонтальный и ставим element = вертикальный
                    
                    this.element.innerHTML = '';
                    this.element = document.querySelector('.table_month_horiz');
                    html = ['<tr class="week_day">', '<tr>', '<tr>', '<tr>', '<tr>', '<tr>', '<tr>'];
                    for (var i = 0; i < this.data.length; i++) {
                        html[i % 7] += '<td class="day">' + this.data[i];
                    }
                    html = html.join('');
                    
                }
                this.numYear.textContent = this.year;
                this.monthName.textContent = this.month;
                this.element.innerHTML = html;
            },
            toggle: function(){
                this.type = this.type == 'vert' ? 'horiz' : 'vert';
                this.render();
            },
        };
        var today = new Date(),
            thisYear = today.getFullYear(),
            thisMonth = today.getMonth();
        calendar.days = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
        calendar.numYear = document.querySelector('#num_year');
        calendar.monthName = document.querySelector('#month_name');
        calendar.update(thisYear, thisMonth);
        calendar.render();
        
        //Запрашивается селектор по тегу select. Добавляются месяца.
        selector = document.querySelector('select');
        month_list = ['Январь', 'Февраль', 'Март', 'Апрель', ' Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'];
        for (var i = 0; i < month_list.length; i++){
        selector.options[i] = new Option(month_list[i], i);
        }
        selector.selectedIndex = thisMonth;
        
        //Это для того, чтобы менять календарь при изменении месяца и года
        selector.addEventListener('change', load);
        document.querySelector('#year_input').addEventListener('change', load);
        

        //не month_rotate, запуточки вышли
        //и не id, у Вас там класс
        // но лучше поменять класс на id  и стили
        document.getElementById('table_rotate').addEventListener('click', function() {
        //нет функции toggle
        // но есть функция рендера разных видов календаря
        // поэтому можно создать атрибут календаря, отвечающий за вид
        //и тогл, который будет менять атрибут типа и рендерить

        calendar.toggle();
        });
        
        //Вынесена загрузка в отдельную функцию.
        function load(){
        //здесь та же проблема, нет такого id
        var year = document.getElementById('year_input').value;
        var month = selector.selectedIndex;
        calendar.update(year, month);
        calendar.render();
        }
        //при зыгрузке страницы вызывается тот же обработчик
        document.addEventListener("DOMContentLoaded", ()=>{
        document.querySelector('#year_input').value = thisYear;
        load();
        });
        
    </script>
</body>

</html>

БЛОГ НА HUSL

Календарь, почему не работают элементы управления?

Ответы (2 шт):