Всем доброго времени суток. Я полный новичок. Пытаюсь реализовать простой "календарик". Предлагается сделать выбор месяца, после чего рисуется календарь с количеством дней в зависимости от месяца. При выборе месяца "Февраль" появляются 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 с функцией, которая на первый взгляд работает исправно...