Как правильно изменить fill у svg по клику с помощью JavaScript?

Question

[Eva Ingannamorte]

Мне нужно, чтобы при нажатии на серую кнопку со стрелкой она становилась белой - rgb(255, 255, 255), а другая белая кнопка при этом становилась серой - rgb(228, 228, 228), и наоборот. Взаимная смена цвета, в общем.


У меня есть черновик кода для этого, но он вовсе не работает. Ошибок в консоли нет. Идентификаторы нацеплены на теги svg, их fill указан только в файле стилей. Подправьте, пожалуйста.

let swiperBtnPrev = document.getElementById('btn-prev');
let swiperBtnNext = document.getElementById('btn-next');

swiperBtnPrev.addEventListener('click', function recolouring1(){
    if (swiperBtnPrev.style.fill === 'rgb(228, 228, 228)') {
        swiperBtnPrev.style.fill = 'rgb(255, 255, 255)';
        swiperBtnNext.style.fill = 'rgb(228, 228, 228)';
    } else if (swiperBtnPrev.style.fill === 'rgb(255, 255, 255)'){
        swiperBtnPrev.style.fill = 'rgb(228, 228, 228)';
        swiperBtnNext.style.fill = 'rgb(255, 255, 255)';
    }
});

swiperBtnNext.addEventListener('click', function recolouring2(){
    if (swiperBtnNext.style.fill === 'rgb(228, 228, 228)') {
        swiperBtnNext.style.fill = 'rgb(255, 255, 255)';
        swiperBtnPrev.style.fill = 'rgb(228, 228, 228)';
    } else if (swiperBtnNext.style.fill === 'rgb(255, 255, 255)'){
        swiperBtnNext.style.fill = 'rgb(228, 228, 228)';
        swiperBtnPrev.style.fill = 'rgb(255, 255, 255)';
    }
});

Comments

[deantek]

повесь класс active при клике на кнопку и через css меняй цвет у svg

Answer 1

[Deso Crew]

function changeSvgFill(Selector, toColor) { 
    Selector.style.fill = toColor; 
};
// Тогда:
// При условии, что fill у swiperBtnPrev серый
swiperBtnPrev.onclick = function() {
    changeSvgFill(swiperBtnPrev, 'rgb(255, 255, 255)')
    changeSvgFill(swiperBtnNext, 'rgb(228, 228, 228)')
}
swiperBtnNext.onclick = function() {
    changeSvgFill(swiperBtnPrev, 'rgb(228, 228, 228)')
    changeSvgFill(swiperBtnNext, 'rgb(255, 255, 255)')
}