Как сделать чтобы при клике на кнопку менялось изображение

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

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

Для первой картинки меняется изображение, для остальных нет, querySelectorAll так же.

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' value="Что нужно сделать">
        </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'>item</div>
            <img src="close.png" alt="" class = "closeimg">
        </div>
        <div class="item">
            <img src="unactivetask.gif" alt="" class="itemicon thirditem">
            <div class = 'description'>item</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
'use strict';
 
let itemicon = document.querySelector('.itemicon');
let itemActive = document.querySelector('.itemActive');
 
 
itemicon.onclick = function() {
    if (!itemicon.classList.contains('itemActive')) {
        itemicon.src = 'activetask.jpg';
        itemicon.classList.add('itemActive');
    } else {
        itemicon.src = 'unactivetask.gif';
        itemicon.classList.remove('itemActive');
    }   
};

https://jsfiddle.net/L68gxt7/h581t306/2/

@klyapa · 23.10.2021, 22:16

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

Для первой картинки меняется изображение, для остальных нет

У вас в переменной let itemicon = document.querySelector('.itemicon'); один единственный элемент, по которому вы кликаете и у него меняется изображение. А вы что хотите? Чтобы кликая по одному элементу у всех поменялось? И какой у вас целевой элемент клика, в смысле, что вы считаете "кнопкой"?
Напишите, по чему нужно щёлкнуть, и что вы хотите получить в итоге ...

@sozdatel · 23.10.2021, 23:27 **[ТС]**

klyapa, целевой элемент клика - изображение img. У меня 3 блока item, в каждом из которых картинка img. Я хочу, чтобы кликая на кнопку (картинку) в соответствующем блоке, менялось изображение в этом блоке, пока только в первом блоке меняется. Но я не хочу этот код

JavaScript
1
2
3
4
5
6
7
8
9
{
    if (!itemicon.classList.contains('itemActive')) {
        itemicon.src = 'activetask.jpg';
        itemicon.classList.add('itemActive');
    } else {
        itemicon.src = 'unactivetask.gif';
        itemicon.classList.remove('itemActive');
    }   
};

выносить в отдельную функцию, и вешать её по клику на firstitem, seconditem, thirditem, хотя можно было бы и, наверное, заработало, но по-моему, это неправильный подход.

@klyapa · 24.10.2021, 00:27

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// если "навсегда" картинку поменять
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') ) return;
    elem.classList.add('itemActive');
    elem.src = 'activetask.jpg';
});
 
// "переключатель" по клику
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');
});

@sozdatel · 26.10.2021, 00:09 **[ТС]**

Я пытаюсь сделать дальше, теперь при вводе в input сверху и нажатии enter хочу, чтобы добавлялся новый div с соответствующим текстом, ничего не выходит, в чём ошибка?

Добавлено через 2 часа 40 минут
Немного изменил код, всё равно не работает

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
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').addEventListener('keyup', (e) => {
    if( !e.target.closest('input.tasks' && event.keyCode !== 13) ) return;
    let task = e.target.closest('input.tasks');
    let newtask = document.createElement('div');
    newtask.className = 'item';
    task.oninput = function () { 
            newtask.innerText = this.value;  
        }
    document.querySelector('div.item').prepend(newtask);
});

Код выше вместо первоначального js, остальное то же самое.

Новые блоги и статьи Все статьи Все блоги /
Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .

Как сделать чтобы при клике на кнопку менялось изображение

Решение