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

Question

Мне нужно, чтобы при нажатии на серую кнопку со стрелкой она становилась белой - 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)';
    }
});

HTML-код со стрелками:

<div class="swiper-button-prev"><svg id="btn-prev" xmlns="http://www.w3.org/2000/svg" width="35" height="35" fill="none"><g clip-path="url(#a)" opacity=".4"><path d="M34.453 17.5c0 9.365-7.588 16.953-16.953 16.953C8.135 34.453.547 26.865.547 17.5.547 8.135 8.135.547 17.5.547c9.365 0 16.953 7.588 16.953 16.953ZM17.5 2.734c-8.114 0-14.766 6.57-14.766 14.766 0 8.114 6.57 14.766 14.766 14.766 8.114 0 14.766-6.57 14.766-14.766 0-8.114-6.57-14.766-14.766-14.766Zm-.855 6.324-7.868 7.861a.82.82 0 0 0 0 1.162l7.868 7.861a.821.821 0 0 0 1.163 0l.471-.471a.817.817 0 0 0-.013-1.17l-5.845-5.639H25.43c.45 0 .82-.369.82-.82v-.684c0-.451-.37-.82-.82-.82H12.42l5.852-5.64a.823.823 0 0 0 .014-1.169l-.472-.471a.83.83 0 0 0-1.169 0Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M35 0H0v35h35z"/></clipPath></defs></svg></div>
<div class="swiper-button-next"><svg id="btn-next" xmlns="http://www.w3.org/2000/svg" width="35" height="35" fill="none"><g clip-path="url(#a)"><path d="M.547 17.5c0 9.365 7.588 16.953 16.953 16.953 9.365 0 16.953-7.588 16.953-16.953C34.453 8.135 26.865.547 17.5.547 8.135.547.547 8.135.547 17.5ZM17.5 2.734c8.114 0 14.766 6.57 14.766 14.766 0 8.114-6.57 14.766-14.766 14.766-8.114 0-14.766-6.57-14.766-14.766 0-8.114 6.57-14.766 14.766-14.766Zm.855 6.324 7.868 7.861a.82.82 0 0 1 0 1.162l-7.868 7.861a.821.821 0 0 1-1.163 0l-.471-.471a.817.817 0 0 1 .013-1.17l5.845-5.639H9.57a.823.823 0 0 1-.82-.82v-.684c0-.451.37-.82.82-.82h13.01l-5.852-5.64a.823.823 0 0 1-.014-1.169l.472-.471a.83.83 0 0 1 1.169 0Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h35v35H0z"/></clipPath></defs></svg></div>

Answer 1

Вы хотели так?

for (let i = 0; i < 2; i++) {
  let directions = getDirections(i)
  let direction = directions.current
  let opposite = directions.opposite

  let button = document.getElementById('btn-' + direction)
  let _button = document.getElementById('btn-' + opposite)

  button.addEventListener('click', () => {
    for (let i = 0; i < 2; i++) {
      setFillColor(i === 0 ? button : _button, i === 0)
    }
  })

  function setFillColor(el, isOpposite) {
    el.querySelector('g').setAttribute('opacity', isOpposite ? 0.4 : 1)
  }

  function getDirections(index) {
    return {
      current: index === 0 ? 'prev' : 'next',
      opposite: index === 0 ? 'next' : 'prev',
    }
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: rgb(1, 17, 32);
}

[class^="swiper-button"] svg {
  fill: rgb(228, 228, 228);
}

[class^="swiper-button"] svg g {
  transition: .3s opacity;
}

<div class="swiper-button-prev"><svg id="btn-prev" xmlns="http://www.w3.org/2000/svg" width="35" height="35" fill="none"><g clip-path="url(#a)" opacity=".4"><path d="M34.453 17.5c0 9.365-7.588 16.953-16.953 16.953C8.135 34.453.547 26.865.547 17.5.547 8.135 8.135.547 17.5.547c9.365 0 16.953 7.588 16.953 16.953ZM17.5 2.734c-8.114 0-14.766 6.57-14.766 14.766 0 8.114 6.57 14.766 14.766 14.766 8.114 0 14.766-6.57 14.766-14.766 0-8.114-6.57-14.766-14.766-14.766Zm-.855 6.324-7.868 7.861a.82.82 0 0 0 0 1.162l7.868 7.861a.821.821 0 0 0 1.163 0l.471-.471a.817.817 0 0 0-.013-1.17l-5.845-5.639H25.43c.45 0 .82-.369.82-.82v-.684c0-.451-.37-.82-.82-.82H12.42l5.852-5.64a.823.823 0 0 0 .014-1.169l-.472-.471a.83.83 0 0 0-1.169 0Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M35 0H0v35h35z"/></clipPath></defs></svg></div>
<div class="swiper-button-next"><svg id="btn-next" xmlns="http://www.w3.org/2000/svg" width="35" height="35" fill="none"><g clip-path="url(#a)"><path d="M.547 17.5c0 9.365 7.588 16.953 16.953 16.953 9.365 0 16.953-7.588 16.953-16.953C34.453 8.135 26.865.547 17.5.547 8.135.547.547 8.135.547 17.5ZM17.5 2.734c8.114 0 14.766 6.57 14.766 14.766 0 8.114-6.57 14.766-14.766 14.766-8.114 0-14.766-6.57-14.766-14.766 0-8.114 6.57-14.766 14.766-14.766Zm.855 6.324 7.868 7.861a.82.82 0 0 1 0 1.162l-7.868 7.861a.821.821 0 0 1-1.163 0l-.471-.471a.817.817 0 0 1 .013-1.17l5.845-5.639H9.57a.823.823 0 0 1-.82-.82v-.684c0-.451.37-.82.82-.82h13.01l-5.852-5.64a.823.823 0 0 1-.014-1.169l.472-.471a.83.83 0 0 1 1.169 0Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h35v35H0z"/></clipPath></defs></svg></div>

БЛОГ НА HUSL

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

Ответы (1 шт):