Форум

Блондинка · #1 (**permalink**) 26.08.2019, 21:07

Есть скрипт

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var d = new Date();


        // следующие 4 строчки должны срабатывать только до события onchange и после клика на кнопку очистить,  в элементах  с id'ами day date month year type_year
        document.querySelector('#day').value = d.getDay()
        document.querySelector('#date').value = d.getDate();
        document.querySelector('#month').value = d.getMonth()+1;
        document.querySelector('#year').value = d.getFullYear();


        // на эти строчки событие не влияет 
        document.querySelector('#startdata').value = d.getFullYear() + '-01-01';
        document.querySelector('#stopdata').value = d.getFullYear() + '-12-31';
    });
</script>

Блондинка · #2 (**permalink**) 26.08.2019, 22:20

Это вообще реально сделать на яваскрипт, то что указанно в комментариях?

Блондинка · #3 (**permalink**) 27.08.2019, 04:38

Кто подскажет где ошибка, почему не показывает значения в элементах

<!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>

join · #4 (**permalink**) 27.08.2019, 05:35

Много примеров реализовать select на js разными способами, знание английского не потребуется. Разберитесь самостоятельно. Это же ваша профессия или хобби..

Блондинка · #5 (**permalink**) 27.08.2019, 20:38

join,
знаешь что было написано На воротах освенцима, "каждому своё" другими словами рождённый ползать, летать не может, что поделать если js это не моё, html css более менее знаю,, если бы ты спросил как заставить цвести кактус или орхиде..ю я бы тебе ответила, просто для продвижения моего хобби приходиться заниматься и яваскриптом, а тут меня просто игнорят.

j0hnik · #6 (**permalink**) 28.08.2019, 05:43

Сообщение от Блондинка

почему не показывает значения в элементах

Обработчик change срабатывает, устанавливая значения в -1, что бы вы не выбирали.

Форум

Справочник

Discord чат

Курсы javascript