0

Всем доброго времени суток. Я полный новичок. Пытаюсь реализовать простой "календарик". Предлагается сделать выбор месяца, после чего рисуется календарь с количеством дней в зависимости от месяца. При выборе месяца "Февраль" появляются radio button с високосным или обычным годом, по умолчанию отмечен високосный год. При выборе любого другого месяца значения отметки radio button очищаются, а отображение блока с ними отключается. Пытаюсь реализовать функцию, когда при выборе соответствующего radio button переменная days в коде менялась и календарь показывал правильное количество дней, но никак не получается это сделать. В текущем варианте при отметке radio button ничего не происходит, что логично, так как нет ни функции onclick, ни eventListener, пытался реализовать через них, но синтаксис взаимодействия этих методов и функций с radio button никак не могу разобрать. Подскажите пожалуйста, как можно реализовать это через Javascript без jQuery. Прикладываю только html и javascript.

const select = document.querySelector('select');
const list = document.querySelector('ul');
const h1 = document.querySelector('h1');
const radioButtons = document.querySelector('.radio_buttons');
let radio = document.getElementsByName("yeartype");




select.addEventListener('change', () => {
  const choice = select.value;
  let days = 31;

  // ADD CONDITIONAL HERE
  if (choice==='January' || choice==='March' || choice==='May' || 
  choice==='July' || choice==='August' || choice==='October' || 
  choice==='December'){
    for (var i = 0; i < radio.length; i++){
      radio[i].checked = false;
    }
    radioButtons.style.display = 'none';
    
    days = 31;
  }
  else if (choice==='April' || choice==='June' || choice==='September' || 
  choice==='November'){
    for (var i = 0; i < radio.length; i++){
      radio[i].checked = false;
    }
    radioButtons.style.display = 'none';

    days = 30;
  }
  else if (choice==='February'){
    radioButtons.style.display = 'block';
    radio[0].checked = true;

    if (radio[0].checked){
      days = 29;
    }
    else if(radio[1].checked){
      days = 28;
    }
  }

  createCalendar(days, choice);
});

function createCalendar(days, choice) {
  list.innerHTML = '';
  h1.textContent = choice;
  for (let i = 1; i <= days; i++) {
    const listItem = document.createElement('li');
    listItem.textContent = i;
    list.appendChild(listItem);
  }
}
<div class="output">

      <label for="month">Select month: </label>
      <select id="month">
        <option value="January">January</option>
        <option value="February">February</option>
        <option value="March">March</option>
        <option value="April">April</option>
        <option value="May">May</option>
        <option value="June">June</option>
        <option value="July">July</option>
        <option value="August">August</option>
        <option value="September">September</option>
        <option value="October">October</option>
        <option value="November">November</option>
        <option value="December">December</option>
      </select>

      <div class="radio_buttons">
        <input type="radio" id="visokos" value="Visokosnij" name="yeartype" checked="true">
        <label for="visokos">Високосный год</label>
        <input type="radio" id="nevisokos" value="Nevisokosnij" name="yeartype">
        <label for="nevisokos">Невисокосный год</label>
      </div>

      <h1>January</h1>

      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
        <li>20</li>
        <li>21</li>
        <li>22</li>
        <li>23</li>
        <li>24</li>
        <li>25</li>
        <li>26</li>
        <li>27</li>
        <li>28</li>
        <li>29</li>
        <li>30</li>
        <li>31</li>
      </ul>

    </div>

Дополнение: попробовал сделать вот таким образом

else if (choice==='February'){
    radioButtons.style.display = 'block';
    radio[0].checked = true;

    function getDaysVariable(daysInFunction){
      if (radio[0].checked){
          daysInFunction = 29;
          return daysInFunction;
      }
      else if(radio[1].checked){
          daysInFunction = 28;
          return daysInFunction;
      }
    }

   radiobuttonsForm.addEventListener('change', getDaysVariable);
  
   days = getDaysVariable();
   console.log('Переменная days равна ' + days);
    
  }

Извлечь переменную из функции получилось, но при переключении radio button ничего не происходит несмотря на то, что есть EventListener с функцией, которая на первый взгляд работает исправно...

1
  • Проблема решена, логика работы программы была неправильная
    – mametaihoo
    5 окт 2022 в 18:46

1 ответ 1

0

else if (choice==='February'){
        radioButtons.style.display = 'block';
        radio[0].checked = true;

        const form = document.querySelector('#choise');
        form.addEventListener('change', () => {
            console.log('he')
            if (radio[0].checked){
                days = 29;
            }
            else if(radio[1].checked){
                days = 28;
            }
            console.log(days)
        })
    }
<form action="days" id="choise">
            <input type="radio" id="visokos" value="Visokosnij" name="yeartype" checked="true">
            <label for="visokos">Високосный год</label>
            <input type="radio" id="nevisokos" value="Nevisokosnij" name="yeartype">
            <label for="nevisokos">Невисокосный год</label>
</form>

Вот при изменении переменна days меняется.

2
  • Добрый день! Переменная действительно меняется, но при этом ее значение остается таковым исключительно в пределах функции, из-за чего количество дней не меняется в самом календаре, за пределами функций у переменной остается значение предыдущего выбранного месяца...пробовал через return, определял функцию, ничего не получается...
    – mametaihoo
    5 окт 2022 в 15:26
  • Прошу прощения, я нашел ошибку, логика работы программы хромала, переделал с вашими дополненями - все заработало. Спасибо за помощь!
    – mametaihoo
    5 окт 2022 в 18:46

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.