Javascript-форум - как объединить три скрипта в один?

<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> table { margin: 10px auto; } td { border: solid 1px #000080; } td.week_day { background-color: #7575FF; } </style> <script> const render = function(range, horiz) { let html = ''; if (horiz) { for (let i = 0, j = 0; i < range.length; i++) { let cls = 'day'; if (i < 7) cls = 'week_day'; if (i % 7 == 0) { html += '<tr>'; } html += `<td class="${cls}">${range[i]}`; } } else { html = []; for (let i = 0; i < range.length; i++) { let cls = 'day'; if (i < 7) { cls = 'week_day' html.push('<tr>') } html[i % 7] += `<td class="${cls}">${range[i]}`; } html = html.join('') } return html } </script> </head> <body> <table class="test"></table> <table class="test"></table> <script> let range = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; let tables = document.querySelectorAll('.test'); let html = render(range); tables[0].innerHTML = html; html = render(range, true); tables[1].innerHTML = html; </script> </body> </html>

<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> table { margin: 10px auto; } td { border: solid 1px #000080; } td.week_day { background-color: #7575FF; } </style> <script> const render = function(range, horiz) { let html = ''; if (horiz) { for (let i = 0, j = 0; i < range.length; i++) { let cls = 'day'; if (i < 7) cls = 'week_day'; if (i % 7 == 0) { html += '<tr>'; } html += `<td class="${cls}">${range[i]}`; } } else { html = []; for (let i = 0; i < range.length; i++) { let cls = 'day'; if (i < 7) { cls = 'week_day' html.push('<tr>') } html[i % 7] += `<td class="${cls}">${range[i]}`; } html = html.join('') } return html } </script> </head> <body> <table class="test"></table> <table class="test horiz"></table> <script> let range = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; let tables = document.querySelectorAll('.test'); tables.forEach(table => { let direction = table.classList.contains('horiz'); table.innerHTML = render(range, direction); }); </script> </body> </html>

рони,
как тут удалить вторую таблицу, чтобы просто менялся класс таблицы? и удалить(в случае необходимости) элементы с названием месяца и года, из html-кода, чтобы скрипт сначала проверял наличие элементов и вставлял необходимое? проще говоря чтобы на странице была только одна таблица, и вне зависимости от наличия/отсутствия элементов id="month_name" и id="num_year" скрипт выводил необходимое?

<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 = '';
                if (this.type == 'vert') {
                    
                    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 {
                    
                    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();
        
        selector = document.querySelector('#select_month');
        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('input', load);
        
        document.getElementById('table_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();
        });
    </script>
</body>
</html>

<select class="select_kvartal"> <option value="Ⅰ">Ⅰ квартал</option> <option value="01" disabled>Январь</option> <option value="02" disabled>Февраль</option> <option value="03" disabled>Март</option> <option value="Ⅱ">Ⅱ квартал</option> <option value="04" disabled>Апрель</option> <option value="05" disabled>Май</option> <option value="06" disabled>Июнь</option> <option value="Ⅲ">Ⅲ квартал</option> <option value="07" disabled>Июль</option> <option value="08" disabled>Август</option> <option value="09" disabled>Сентябрь</option> <option value="Ⅳ">Ⅳ квартал</option> <option value="10" disabled>Октябрь</option> <option value="11" disabled>Ноябрь</option> <option value="12" disabled>Декабрь</option> </select>

<select class="select_05_year"> <option value="Ⅰ">Ⅰ полугодие</option> <option value="01" disabled>Январь</option> <option value="02" disabled>Февраль</option> <option value="03" disabled>Март</option> <option value="04" disabled>Апрель</option> <option value="05" disabled>Май</option> <option value="06" disabled>Июнь</option> <option value="Ⅱ">Ⅱ полугодие</option> <option value="07" disabled>Июль</option> <option value="08" disabled>Август</option> <option value="09" disabled>Сентябрь</option> <option value="10" disabled>Октябрь</option> <option value="11" disabled>Ноябрь</option> <option value="12" disabled>Декабрь</option> </select>

<head> <style type="text/css"> div { border: 1px solid #999; padding: 5px; margin: 0 0 5px; } table { border: 1px solid #00f; padding: 5px; } td { border: 1px solid #090; padding: 5px; } #navigation_panel { white-space: nowrap; overflow: scroll; padding: 5px; min-width: 400px; } select { background-color: hsl(210, 100%, 90%); color: hsl(210, 100%, 50%); border: 1px solid hsl(210, 100%, 50%); font: bold 14px serif; padding: 5px; } button { background-color: hsl(210, 100%, 90%); color: hsl(210, 100%, 50%); border: 1px solid hsl(210, 100%, 50%); font: 14px serif; width: 30px; height:30px; border-radius: 12px 12px 0 12px; } button.month_minus, button.year_minus, button.kvartal_minus, button.year_05_minus { background-color: hsl(210, 100%, 90%); color: hsl(210, 100%, 50%); border: 1px solid hsl(210, 100%, 50%); font: 14px serif; width: 30px; height:30px; border-radius: 28px 0 0 28px/18px 0 0 18px; } button.month_plus, button.year_plus, button.kvartal_plus, button.year_05_plus { background-color: hsl(210, 100%, 90%); color: hsl(210, 100%, 50%); border: 1px solid hsl(210, 100%, 50%); font: 14px serif; width: 30px; height:30px; border-radius: 0 28px 28px 0/0 18px 18px 0; } input { border: 1px solid #099; width: 60px; } span { background-color: hsl(190, 100%, 98%); color: hsl(190, 100%, 40%); border: 1px solid hsl(190, 100%, 40%); font: 14px serif; padding: 5px; display: inline-block; } </style> </head> <body> <div id="calendar_month"> <div id="month"> <div id="navigation_panel"> Календарь на месяц<br> <button class="month_minus">◀</button> <select class="select_month"> <option value="01">Январь</option> <option value="02">Февраль</option> <option value="03">Март</option> <option value="04">Апрель</option> <option value="05">Май</option> <option value="06">Июнь</option> <option value="07">Июль</option> <option value="08">Август</option> <option value="09">Сентябрь</option> <option value="10">Октябрь</option> <option value="11">Ноябрь</option> <option value="12">Декабрь</option> </select> <button class="month_plus">▶</button> <button class="year_minus">◀</button> <input class="year_input" type="number" value=""> <button class="year_plus">▶</button> <button class="table_rotate">➘</button> </div> <div id="month_name"></div> <table class=" table_month_horiz"></table> </div> </div> </body> <body> <div id="calendar_year"> <div id="navigation_panel"> Календарь на <button class="year_minus">◀</button> <input id="year_input" type="number" size="4" value=""/> <button class="year_plus">▶</button> год. <button class="table_rotate">➘</button> </div> <table id="table"> <tr> <td class="td_month"> <div id="January"></div> <table class="table_month_horiz"></table> </td> <td class="td_month"> <div id="February"></div> <table class="table_month_horiz"></table> </td> <td class="td_month"> <div id="March"></div> <table class="table_month_horiz"></table> </td> </tr> <tr> <td class="td_month"> <div id="April"></div> <table class="table_month_horiz"></table> </td> <td class="td_month"> <div id="May"></div> <table class="table_month_horiz"></table> </td> <td class="td_month"> <div id="June"></div> <table class="table_month_horiz"></table> </td> </tr> <tr> <td class="td_month"> <div id="July"></div> <table class="table_month_horiz"></table> </td> <td class="td_month"> <div id="August"></div> <table class="table_month_horiz"></table> </td> <td class="td_month"> <div id="September"></div> <table class="table_month_horiz"></table> </td> </tr> <tr> <td class="td_month"> <div id="October"></div> <table class="table_month_horiz"></table> </td> <td class="td_month"> <div id="November"></div> <table class="table_month_horiz"></table> </td> <td class="td_month"> <div id="December"></div> <table class="table_month_horiz"></table> </td> </tr> </table> </div> </body> <body> <div id="calendar_month"> <div id="month"> <div id="navigation_panel"> Календарь на месяц<br> <button class="month_minus">◀</button> <select class="select_month"> <option value="01">Январь</option> <option value="02">Февраль</option> <option value="03">Март</option> <option value="04">Апрель</option> <option value="05">Май</option> <option value="06">Июнь</option> <option value="07">Июль</option> <option value="08">Август</option> <option value="09">Сентябрь</option> <option value="10">Октябрь</option> <option value="11">Ноябрь</option> <option value="12">Декабрь</option> </select> <button class="month_plus">▶</button> <button class="year_minus">◀</button> <input class="year_input" type="number" value=""> <button class="year_plus">▶</button> <button class="table_rotate">➘</button> </div> <div id="month_name"></div> <table class=" table_month_horiz"></table> </div> <span id="select_year">календарь на год</span><br> </div> <div id="calendar_year"> <div id="navigation_panel""> Календарь на <button class="year_minus">◀</button> <input id="year_input" type="number" size="4" value=""/> <button class="year_plus">▶</button> год. <button class="table_rotate">➘</button> </div> <table id="table"> <tr> <td class="td_month"> <div id="January"></div> <table class="table_month_horiz"></table> </td> <td class="td_month"> <div id="February"></div> <table class="table_month_horiz"></table> </td> <td class="td_month"> <div id="March"></div> <table class="table_month_horiz"></table> </td> </tr> <tr> <td class="td_month"> <div id="April"></div> <table class="table_month_horiz"></table> </td> <td class="td_month"> <div id="May"></div> <table class="table_month_horiz"></table> </td> <td class="td_month"> <div id="June"></div> <table class="table_month_horiz"></table> </td> </tr> <tr> <td class="td_month"> <div id="July"></div> <table class="table_month_horiz"></table> </td> <td class="td_month"> <div id="August"></div> <table class="table_month_horiz"></table> </td> <td class="td_month"> <div id="September"></div> <table class="table_month_horiz"></table> </td> </tr> <tr> <td class="td_month"> <div id="October"></div> <table class="table_month_horiz"></table> </td> <td class="td_month"> <div id="November"></div> <table class="table_month_horiz"></table> </td> <td class="td_month"> <div id="December"></div> <table class="table_month_horiz"></table> </td> </tr> </table> <span id="select_month"> календарь на месяц</span> </div> </body>