Javascript-форум - Доработать скрипт добавив функцию

Кто подскажет где ошибка, почему не показывает значения в элементах
<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title></title>
<style>
body { padding: 0 15px; }
div { min-width: 430px; border: 1px solid #ccc; padding: 5px; margin-top: 5px; }
span.text { font: italic 14px serif; color: hsl(207, 100%, 50%); }
span.background { display: inline-block; 
background: -webkit-linear-gradient(top, hsl(207, 100%, 85%), hsl(207, 100%, 99%));
background: -moz-linear-gradient(top, hsl(207, 100%, 85%), hsl(207, 100%, 99%));
background: -o-linear-gradient(top, hsl(207, 100%, 85%), hsl(207, 100%, 99%));
background: linear-gradient(to top, hsl(207, 100%, 90%), hsl(207, 100%, 99%)); }
#day { width: 122px; background: hsl(207, 100%, 90%); color: hsl(207, 100%, 50%); border: 1px solid hsl(207, 100%, 50%); }
#date { width: 41px; background: hsl(207, 100%, 90%); color: hsl(207, 100%, 50%); border: 1px solid hsl(207, 100%, 50%); }
#month { width: 89px; background: hsl(207, 100%, 90%); color: hsl(207, 100%, 50%); border: 1px solid hsl(207, 100%, 50%); }
#year { width: 50px; height: 19px; padding-left : 5px; background: transparent; color: hsl(207, 100%, 50%); border: 1px solid hsl(207, 100%, 50%); }
#type_year { width: 115px; background: hsl(207, 100%, 90%); color: hsl(207, 100%, 50%); border: 1px solid hsl(207, 100%, 50%); }
#stopdata, 
#startdata { 
width: 91px; 
height: 19px;
background: hsl(207, 100%, 90%); 
color: hsl(207, 100%, 50%); 
border: 1px solid hsl(207, 100%, 50%); 
display: inline-block: 
text-align: center; }
input, select { font: 14px serif; }
input[type=number], input[type=date] { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
input[type=date]::-webkit-calendar-picker-indicator
{ display: none; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none; }
input[type='number'] {
-moz-appearance: textfield; }
button { background: hsl(207, 100%, 90%); color: hsl(207, 100%, 50%); border: 1px solid hsl(207, 100%, 50%); font: 14px serif; position: relative; right: 2px; }
</style>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var d = new Date();
        const datas = [document.querySelector('#day'), document.querySelector('#date'), 
                       document.querySelector('#month'), document.querySelector('#year')]
        datas[0].value = d.getDay();
        datas[1].value = d.getDate();
        datas[2].value = d.getMonth()+1;
        datas[3].value = d.getFullYear();
        document.querySelector('#startdata').value = d.getFullYear() + '-01-01';
        document.querySelector('#stopdata').value = d.getFullYear() + '-12-31';
 
        datas.forEach(item => {
            item.addEventListener('change', function(){
                datas[0].value = -1;
                datas[1].value = -1;
                datas[2].value = -1;
                datas[3].value = "";
            });
        })
    });
</script>
</head>
<body>
<div>
<span class="text">Выберите нужные компоненты даты и установите нужные значения.</span><br>
<select id="day">
<option value="-1"></option>
<option value="1">Понедельник</option>
<option value="2">Вторник</option>
<option value="3">Среда</option>
<option value="4">Четверг</option>
<option value="5">Пятница</option>
<option value="6">Суббота</option>
<option value="0">Воскресенье</option>
</select><br/>
<select id="date">
<option value="-1"></option>
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08"> 8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select> 
<select id="month">
<option value="-1"></option>
<option value="1">января</option>
<option value="2">февраля</option>
<option value="3">марта</option>
<option value="4">апреля</option>
<option value="5">мая</option>
<option value="6">июня</option>
<option value="7">июля</option>
<option value="8">августа</option>
<option value="9">сентября</option>
<option value="10">октября</option>
<option value="11">ноября</option>
<option value="12">декабря</option>
</select> 
<span class="background">
<input type="number" id="year"/>
</span> 
<select id="type_year">
<option value="01" selected>любой</option>
<option value="02">простой</option>
<option value="03">высокосный</option>
</select><br><br>
<span class="text">Установите начало периода.</span><br>
<input type="date" id="startdata"/><br/>
<span class="text">Установите окончание периода.</span><br>
<input type="date" id="stopdata"/><br><br>
<button type="button">Начать поиск</button>
<button type="reset">Удалить результат и введённые данные</button>
</div>
<div id="rezultat">display none
</div>
</body>
</html>