Функция смены картинки по нажатию на элементы

@Kurio · Регистрация: 09.02.2022

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

Приветствую.

Подскажите, пожалуйста, каким образом стоит правильно оформить код у данной функции? Не могу всё никак додуматься.

Основной смысл того, что происходит до и внутри функции:

Я создаю переменные со значениями правого и левого "селекторов", затем, указываю переменную с элементом на ссылку картинки (где она находится в DOM-структуре html-страницы), создаю массив с ссылками других картинок, чтобы в будущем их можно было изменять на простой клик мышкой по правому и левому "селекторам".
В самой функции, я записываю два условных оператора if, где 1 - left_side, а 2 - right_side, а также, создаю цикл for для перебора массива с ссылками на картинки.

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

JavaScript-структура:

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
// Change Character Function
let lSideChange = document.querySelector('.to_left_side');
let rSideChange = document.querySelector('.to_right_side');
let checkerValue = document.querySelector('.char___img').src;
let charConfig = ['images/characters/sans.png', 
'images/characters/fell_sans.png', 
'images/characters/dust_sans.png', 
'images/characters/smile_sans.png'];
 
lSideChange.addEventListener('click', ChangeChar);
rSideChange.addEventListener('click', ChangeChar);
 
function ChangeChar(event) {
    if (event.currentTarget.className == 'to_left_side') {
        for (let index = 0; index < charConfig.length; index++) {
            if (charConfig[index] === checkerValue) {
                
            }
        }
    }
 
    if (event.currentTarget.className == 'to_right_side') {
        for (let index = 0; index < charConfig.length; index++) {
            if (charConfig[index] === checkerValue) {
                
            }
        }
    }
}

@klyapa · 13.02.2022, 21:57

А что это за переменная?

JavaScript
1
let checkerValue = document.querySelector('.char___img').src;

Вы просто хотите менять адрес статической картинке, нажимая на кнопки право/лево, и в зависимости от кнопки, передвигаться по индексам массива с адресами charConfig вперёд/назад. Я правильно понимаю?

@Kurio · 13.02.2022, 22:21 **[ТС]**

Да, правильно понимаете.

Эта переменная - сама картинка в DOM-структуре. (тоесть её нужно менять из конфига на право-лево)

Просто я записал её наименование не особо логично, думаю, можно поменять.

@klyapa · 13.02.2022, 23:37

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
// Change Character Function
let lSideChange = document.querySelector('.to_left_side'),
    rSideChange = document.querySelector('.to_right_side'),
    checkerValue = document.querySelector('.char___img'),
    charConfig = [
        'images/characters/sans.png', 
        'images/characters/fell_sans.png', 
        'images/characters/dust_sans.png', 
        'images/characters/smile_sans.png'
    ];
 
[lSideChange, rSideChange].forEach(e => e.addEventListener('click', ChangeChar));
 
function ChangeChar(e) {
    let src = checkerValue.getAttribute('src'),
        index = charConfig.indexOf(src);
    
    if(index !== -1) {
        if(e.currentTarget.classList.contains('to_left_side')) {
            if(index === 0) checkerValue.src = charConfig[charConfig.length - 1];
            else checkerValue.src = charConfig[index - 1];
        }
        if(e.currentTarget.classList.contains('to_right_side')) {
            if(index === charConfig.length - 1) checkerValue.src = charConfig[0];
            else checkerValue.src = charConfig[index + 1];      
        }       
    }
    else checkerValue.src = charConfig[0];
}

@Kurio · 13.02.2022, 23:49 **[ТС]**

Очень интересное решение)
Спасибо)

@klyapa · 13.02.2022, 23:52

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

Очень интересное решение)

Работает хоть? )

@Kurio · 13.02.2022, 23:56 **[ТС]**

Да, всё работает.

@klyapa · 14.02.2022, 00:04

Кстати, пока не забыл, доставать значение src вот таким образом - плохая затея...

JavaScript
1
let checkerValue = document.querySelector('.char___img').src;

Вы получите полный путь к картинке с протоколом и всеми patch-ами. Если имеете дело с относительными адресами изображений, то лучше использовать метод...

JavaScript
1
img.getAttribute('src')

@Kurio · 14.02.2022, 00:22 **[ТС]**

Да, из-за этого у меня и не получалось нормально получить ссылку, чтобы ею манипулировать в будущем. Поэтому и появились проблемы)
Благодарю.

Новые блоги и статьи Все статьи Все блоги /
сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и источниками (напряжения, ЭДС и тока). Найти токи и напряжения во всех элементах. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и. . .

@Kurio 1 / 1 / 0 Регистрация: 09.02.2022 Сообщений: 22
	13.02.2022, 22:21 [ТС]
	Да, правильно понимаете. Эта переменная - сама картинка в DOM-структуре. (тоесть её нужно менять из конфига на право-лево) Просто я записал её наименование не особо логично, думаю, можно поменять. 0

@Kurio 1 / 1 / 0 Регистрация: 09.02.2022 Сообщений: 22
	13.02.2022, 23:49 [ТС]
	Очень интересное решение) Спасибо) 0

@Kurio 1 / 1 / 0 Регистрация: 09.02.2022 Сообщений: 22
	13.02.2022, 23:56 [ТС]
	Да, всё работает. 0

@Kurio 1 / 1 / 0 Регистрация: 09.02.2022 Сообщений: 22
	14.02.2022, 00:22 [ТС]
	Да, из-за этого у меня и не получалось нормально получить ссылку, чтобы ею манипулировать в будущем. Поэтому и появились проблемы) Благодарю. 0

Функция смены картинки по нажатию на элементы

Решение