Как изменить значение событий

@sozdatel · Регистрация: 20.08.2016

Студворк — интернет-сервис помощи студентам

Хотел написать код, чтобы перед items left было количество невыбранных item, т.е если 3 пустых круга, то 3 items left, 2 - 2 items left и т.д. Заккоментировал последнюю строку js, потому что вместо значения из функции выше пишется весь код этой функции.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
   
    <form action="" class ='todo'>
        <div class="inputarea">
            <img src="arrow.png" alt="" class="arrow">
            <input class = 'tasks' placeholder="Что нужно сделать">
        </div>
        <div class="item">
            <img src="unactivetask.gif" alt="" class="itemicon firstitem">
            <div class = 'description'>item</div>
            <img src="close.png" alt="" class = "closeimg">
        </div>
        <div class="item">
            <img src="unactivetask.gif" alt="" class="itemicon seconditem">
            <div class = 'description'>item1</div>
            <img src="close.png" alt="" class = "closeimg">
        </div>
        <div class="item">
            <img src="unactivetask.gif" alt="" class="itemicon thirditem">
            <div class = 'description'>item2</div>
            <img src="close.png" alt="" class = "closeimg">
        </div>
        <div class="footer">
            <div class="itemsleft">
                items left
            </div>
            <div class="itemscondition">
                <div class="allitems">
                    All
                </div>
                <div class="activeitem">
                    Active
                </div>
                <div class="completeditem">
                    Completed
                </div>
            </div>
            <div class="clearcompleted">
                Clear completed
            </div>
        </div>
    </form>
    
    <script src="script.js"></script>
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
.todo {
    background-color: aquamarine;
    width: 500px;
    margin: 0 auto;
    border: 1.5px solid gold;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
 
.inputarea {
    display: flex;
    border-bottom: 2px solid gray;
}
 
.arrow {
    height: 20px;
    width: 20px;
    padding-top: 5px;
    padding-left: 10px;
    padding-right: 10px;
}
 
.tasks {
    border: none;
    background-color: aquamarine;
    outline: none;
}
 
.itemicon {
    height: 20px;
    width: 20px;
    padding-left: 10px;
    padding-right: 10px;
}
 
 
.item {
    padding-top: 10px;
    padding-bottom: 10px;
    display: flex;
    border-bottom: 2px solid gray;
    position: relative;
}
 
.tasks {
    padding-top: 10px;
    padding-bottom: 10px;
}
 
.description {
    
}
 
.closeimg {
    height: 20px;
    width: 20px;
    position: absolute;
    right: 10px;
}
 
.footer, .itemscondition {
    display: flex;
    justify-content: space-between;
}
 
 
.allitems {
    padding-right: 10px;
}
 
.activeitem {
    padding-right: 10px;
}
 
.itemscondition, .itemsleft, .clearcompleted {
    padding-top: 10px;
    padding-bottom: 10px;
}
 
.itemsleft {
    padding-left: 10px;
}
 
.clearcompleted {
    padding-right: 10px;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
'use strict';
 
 
document.querySelector('form.todo').addEventListener('click', (e) => {
    if( !e.target.closest('img.itemicon') ) return;
    let elem = e.target.closest('img.itemicon');
    if( elem.classList.contains('itemActive') ) elem.src = 'unactivetask.gif';
    else elem.src = 'activetask.jpg';
    elem.classList.toggle('itemActive');
});
 
document.querySelector('form.todo').addEventListener('click', (e) => {
    if( !e.target.closest('img.closeimg') ) return;
    let item = e.target.closest('div.item')
    item.remove();
});
 
 
document.querySelector('form.todo input.tasks').addEventListener('keydown', (e) => {
    if(e.keyCode === 13) {
        e.preventDefault();
        let newtask = document.querySelector('form.todo div.item').cloneNode(true);
        newtask.querySelector('div.description').innerText = e.target.value;
        e.target.parentElement.after(newtask);
        
        let input = document.querySelector('form.todo input.tasks');
        input.value = '';
    }
});
 
let todo = document.querySelector('form.todo');
let item = document.querySelector('form.todo div.item img.itemicon');
 
let count = function() {
    for (let i = 0; i < todo.length; i++) {
        if (!item.classList.contains('itemActive')) {
            count++;
        }
    }
    return count;
}
let itemsLeft = document.querySelector('form.todo div.footer div.itemsleft');
//itemsLeft.innerHTML = `${count}`;

https://jsfiddle.net/L68gxt7/62bs0umg/

@mrtoxas · 31.10.2021, 14:58

Особо не вникая в код, но то, что вы пытаетесь делать в последней функции, должно выглядеть так

JavaScript
1
2
3
4
5
6
7
8
9
10
11
const count = function() {  
    let counter = 0;
    for (let i = 0; i < todo.length; i++) {
        if (!item.classList.contains('itemActive')) {
            counter++;
        }
    }
    return counter;
}
let itemsLeft = document.querySelector('form.todo div.footer div.itemsleft');
itemsLeft.innerHTML = `${count()}`;

@sozdatel · 31.10.2021, 22:54 **[ТС]**

mrtoxas, не работает

Добавлено через 2 часа 0 минут
Сам сделал.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
let countItems = function() {
    let items = document.querySelectorAll('form.todo div.item img.itemicon');
    let blankItems = [];
    for (let i = 0; i < items.length; i++) {
        if (!items[i].classList.contains('itemActive')) {
            blankItems.push(items[i]);    
        }
    
    }
 
    let count = blankItems.length;
 
    let itemsLeft = document.querySelector('form.todo div.footer div.itemsleft');
    itemsLeft.innerHTML = `${count} items left`; 
}
countItems();
 
 
document.querySelector('form.todo').addEventListener('click', (e) => {
    if (!e.target.closest('img.itemicon') ) return;
    countItems();       
});

Добавлено через 13 минут
Ну и здесь дописал

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
document.querySelector('form.todo input.tasks').addEventListener('keydown', (e) => {
    if(e.keyCode === 13) {
        e.preventDefault();
        let newtask = document.querySelector('form.todo div.item').cloneNode(true);
        newtask.querySelector('div.description').innerText = e.target.value;
        e.target.parentElement.after(newtask);
        
        let input = document.querySelector('form.todo input.tasks');
        input.value = '';
        countItems();
    }
});

Код js полностью:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
'use strict';
 
 
document.querySelector('form.todo').addEventListener('click', (e) => {
    if( !e.target.closest('img.itemicon') ) return;
    let elem = e.target.closest('img.itemicon');
    if( elem.classList.contains('itemActive') ) elem.src = 'unactivetask.gif';
    else elem.src = 'activetask.jpg';
    elem.classList.toggle('itemActive');
});
 
document.querySelector('form.todo').addEventListener('click', (e) => {
    if( !e.target.closest('img.closeimg') ) return;
    let item = e.target.closest('div.item')
    item.remove();
});
 
 
document.querySelector('form.todo input.tasks').addEventListener('keydown', (e) => {
    if(e.keyCode === 13) {
        e.preventDefault();
        let newtask = document.querySelector('form.todo div.item').cloneNode(true);
        newtask.querySelector('div.description').innerText = e.target.value;
        e.target.parentElement.after(newtask);
        
        let input = document.querySelector('form.todo input.tasks');
        input.value = '';
        countItems();
    }
});
 
 
let countItems = function() {
    let items = document.querySelectorAll('form.todo div.item img.itemicon');
    let blankItems = [];
    for (let i = 0; i < items.length; i++) {
        if (!items[i].classList.contains('itemActive')) {
            blankItems.push(items[i]);    
        }
    
    }
 
    let count = blankItems.length;
 
    let itemsLeft = document.querySelector('form.todo div.footer div.itemsleft');
    itemsLeft.innerHTML = `${count} items left`; 
}
countItems();
 
 
document.querySelector('form.todo').addEventListener('click', (e) => {
    if (!e.target.closest('img.itemicon') ) return;
    countItems();       
});

@klyapa · 31.10.2021, 23:03

Сообщение от sozdatel

не работает

Кроме метода querySelector, есть ещё querySelectorAll, который возвращает объект NodeList. Вот его можно перебирать в цикле. Метод querySelector всегда возвращает первый найденный элемент или null. Вы в функции count пытаетесь в цикле перебирать одну единственную форму todo.

JavaScript
1
2
3
4
5
const items = document.querySelectorAll('form.todo div.item img.itemicon'),
      itemsLeft = document.querySelector('form.todo div.footer div.itemsleft'),
      count = () => [...items].filter(e => !e.classList.contains('itemActive')).length;
 
itemsLeft.innerHTML = `${count()}`;

И потом, как вы с этой функцией собираетесь проверять, сколько у вас "невыбранных" элементов? После перезагрузки, у вас всегда будет три элемента, судя по html.

Добавлено через 2 минуты

Сообщение от sozdatel

Сам сделал

Поздравляю ))

@sozdatel · 31.10.2021, 23:07 **[ТС]**

klyapa, ваш код не работает.( А насчёт перезагрузки, не дошёл ещё до этого, наверное, сохранять в local storage?

@klyapa · 31.10.2021, 23:16

Сообщение от sozdatel

klyapa, ваш код не работает

Не верю! ) Единственная причина, по которой мой код не работает, это какой-нить старючий бровзер. Какой у вас бровзер, если не секрет?

Добавлено через 4 минуты
А так работает?

JavaScript
1
2
3
4
5
const items = document.querySelectorAll('form.todo div.item img.itemicon'),
      itemsLeft = document.querySelector('form.todo div.footer div.itemsleft'),
      count = () => Array.from(items).filter(e => !e.classList.contains('itemActive')).length;
 
itemsLeft.innerHTML = `${count()}`;

@sozdatel · 31.10.2021, 23:25 **[ТС]**

klyapa, гугл хром)

Добавлено через 7 минут
klyapa, правильно ли я понимаю, что эту часть моего кода надо закомментировать?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
let countItems = function() {
    let items = document.querySelectorAll('form.todo div.item img.itemicon');
    let blankItems = [];
    for (let i = 0; i < items.length; i++) {
        if (!items[i].classList.contains('itemActive')) {
            blankItems.push(items[i]);    
        }
    
    }
 
    let count = blankItems.length;
 
    let itemsLeft = document.querySelector('form.todo div.footer div.itemsleft');
    itemsLeft.innerHTML = `${count} items left`; 
}
countItems();
 
 
document.querySelector('form.todo').addEventListener('click', (e) => {
    if (!e.target.closest('img.itemicon') ) return;
    countItems();       
});

Если да, то нет, не работает.(
Если нет, то не понимаю, что меняет ваш код.) Что он добавляет к моему, вышенаписанному?

@klyapa · 31.10.2021, 23:25

Сообщение от sozdatel

klyapa, гугл хром)

Значит это у вас что-то. Я же ваш код сам писал ), а сейчас допилил слегка, как же он может не работать )

@sozdatel · 31.10.2021, 23:28 **[ТС]**

klyapa, Для того, чтобы понять, работает ли ваш код, надо ли закомментировать ту часть, что я написал в сообщении выше?

@klyapa · 31.10.2021, 23:42

Сообщение от sozdatel

klyapa, Для того, чтобы понять, работает ли ваш код, надо ли закомментировать ту часть, что я написал в сообщении выше?

Давайте всё повторим сначала. У меня ещё тот код в бэкапах сохранился ) ... допилил только. Вот всё, как есть, копируйте и проверяйте, а то, что у вас сейчас - всё выкидывайте, в смысле закомментируйте )

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
'use strict';
 
const form = document.querySelector('form.todo'),
      newtask = document.querySelector('form.todo div.item'),
      items = document.querySelectorAll('form.todo div.item img.itemicon'),
      itemsLeft = document.querySelector('form.todo div.footer div.itemsleft'),
      input = document.querySelector('form.todo input.tasks'),
      count = () => Array.from(items).filter(e => !e.classList.contains('itemActive')).length;
 
itemsLeft.innerHTML = `${count()}`;
 
form.addEventListener('click', e => {
    if( !e.target.closest('img.itemicon') ) return;
    let elem = e.target.closest('img.itemicon');
    if( elem.classList.contains('itemActive') ) elem.src = 'unactivetask.gif';
    else elem.src = 'activetask.jpg';
    elem.classList.toggle('itemActive');
});
 
form.addEventListener('click', e => {
    if( !e.target.closest('img.closeimg') ) return;
    let item = e.target.closest('div.item')
    item.remove();
});
 
input.addEventListener('keydown', e => {
    if(e.keyCode === 13) {
        e.preventDefault();
        let _newtask = newtask.cloneNode(true);
        _newtask.querySelector('div.description').innerText = e.target.value;
        e.target.parentElement.after(_newtask);
        
        e.target.value = '';
    }
});

@sozdatel · 31.10.2021, 23:48 **[ТС]**

klyapa, сделал, всё равно не работает.

@klyapa · 31.10.2021, 23:56

Сообщение от sozdatel

всё равно не работает.

Да что ж такое ... У меня всё работает. Картинки только свои. Там, в нижнем, левом углу цифра 3 должна стоять, после перезагрузки, вместо текста items left

@klyapa · 31.10.2021, 23:59

@sozdatel · 01.11.2021, 00:01 **[ТС]**

klyapa, цифра-то 3 стоит, а что от неё толку? Когда я нажимаю на картинки, она как была 3, так и остаётся). А не 2, 1 и т.д

@klyapa · 01.11.2021, 00:13

Сообщение от sozdatel

цифра-то 3 стоит, а что от неё толку? Когда я нажимаю на картинки, она как была 3, так и остаётся). А не 2, 1 и т.д

А вы что хотели? Надо же теперь привязать это всё дело к событию какому-нить. Хахх..., а я голову ломаю. А это кто писал?

Сообщение от sozdatel

А насчёт перезагрузки, не дошёл ещё до этого, наверное, сохранять в local storage?

Я же не зря задавал вопрос:

Сообщение от klyapa

как вы с этой функцией собираетесь проверять, сколько у вас "невыбранных" элементов? После перезагрузки, у вас всегда будет три элемента

А теперь нужно придумать событие и по нему высвечивать количество "невыбранных" item. Думайте

Добавлено через 4 минуты
Сделайте кнопку в html, чтоб удобно по ней кликать было ... в углу, или внизу, или сбоку где-нибудь

@sozdatel · 01.11.2021, 00:17 **[ТС]**

klyapa, так у меня уже всё написано было.) А у вас разве не привязано к обработчикам? Click, keydown вроде написано, а всё равно не работает. В общем, я вас не понимаю, код ваш не работает, мой работает, зачем мне доделывать ваш код, если у меня мой работает?

Ваш ведь тоже не только после перезагрузки не меняется, но вообще не работает. В общем, спасибо большое конечно, но я оставлю свой код.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
'use strict';
 
 
document.querySelector('form.todo').addEventListener('click', (e) => {
    if( !e.target.closest('img.itemicon') ) return;
    let elem = e.target.closest('img.itemicon');
    if( elem.classList.contains('itemActive') ) elem.src = 'unactivetask.gif';
    else elem.src = 'activetask.jpg';
    elem.classList.toggle('itemActive');
});
 
document.querySelector('form.todo').addEventListener('click', (e) => {
    if( !e.target.closest('img.closeimg') ) return;
    let item = e.target.closest('div.item')
    item.remove();
});
 
 
document.querySelector('form.todo input.tasks').addEventListener('keydown', (e) => {
    if(e.keyCode === 13) {
        e.preventDefault();
        let newtask = document.querySelector('form.todo div.item').cloneNode(true);
        newtask.querySelector('div.description').innerText = e.target.value;
        e.target.parentElement.after(newtask);
        
        let input = document.querySelector('form.todo input.tasks');
        input.value = '';
        countItems();
    }
});
 
 
let countItems = function() {
    let items = document.querySelectorAll('form.todo div.item img.itemicon');
    let blankItems = [];
    for (let i = 0; i < items.length; i++) {
        if (!items[i].classList.contains('itemActive')) {
            blankItems.push(items[i]);    
        }
    
    }
 
    let count = blankItems.length;
 
    let itemsLeft = document.querySelector('form.todo div.footer div.itemsleft');
    itemsLeft.innerHTML = `${count} items left`; 
}
countItems();
 
 
document.querySelector('form.todo').addEventListener('click', (e) => {
    if (!e.target.closest('img.itemicon') ) return;
    countItems();       
});

@klyapa · 01.11.2021, 00:52

Сообщение от sozdatel

так у меня уже всё написано было

Ну тогда гуд ) Я думал вы хотите отдельную кнопку, а не распихивать по всем обработчикам. Исходил из того, что вы упомянули localStorage, и вскоре будете заниматься "сохранением". Для этого случая хорошо бы иметь отдельное событие и обработчик

Сообщение от sozdatel

но я оставлю свой код

Отлично! Я только ЗА. Удачи вам.

Новые блоги и статьи Все статьи Все блоги /
Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .
Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .

@sozdatel 10 / 10 / 1 Регистрация: 20.08.2016 Сообщений: 245
	31.10.2021, 23:07 [ТС]
	klyapa, ваш код не работает.( А насчёт перезагрузки, не дошёл ещё до этого, наверное, сохранять в local storage? 0

@sozdatel 10 / 10 / 1 Регистрация: 20.08.2016 Сообщений: 245
	31.10.2021, 23:28 [ТС]
	klyapa, Для того, чтобы понять, работает ли ваш код, надо ли закомментировать ту часть, что я написал в сообщении выше? 0

@sozdatel 10 / 10 / 1 Регистрация: 20.08.2016 Сообщений: 245
	31.10.2021, 23:48 [ТС]
	klyapa, сделал, всё равно не работает. 0

@klyapa 3503 / 1267 / 429 Регистрация: 24.07.2016 Сообщений: 1,890
	31.10.2021, 23:59
	0

@sozdatel 10 / 10 / 1 Регистрация: 20.08.2016 Сообщений: 245
	01.11.2021, 00:01 [ТС]
	klyapa, цифра-то 3 стоит, а что от неё толку? Когда я нажимаю на картинки, она как была 3, так и остаётся). А не 2, 1 и т.д 0