как добавить и убрать что-то вроде класса active на чистом js

Question

данный код находит все кнопки product__favourite и меняет их src , после чего выпадает подходящая картинка загорается просто красное сердечко , вернее это происходит с той кнопкой на которую нажимаешь . Я хочу что бы при повторном клике вместо - button.querySelector('img').src = images/product__favourite--true.png; становилось - button.querySelector('img').src = images/product__favourite.png;

const buttons = document.querySelectorAll(".product__favourite");

  buttons.forEach((button) => {
    button.addEventListener('click', () =>{
      console.log(`click`); 
      button.querySelector('img').src = `images/product__favourite--true.png`;
     })
    
  });

Answer 1

Можно вот такой простой вариант

const buttons = document.querySelectorAll(".product__favourite");

  buttons.forEach((button) => {
    button.addEventListener('click', (e) =>{
      
      let img = e.target.firstElementChild
      
      if (img.getAttribute('src') == 'images/product__favourite--true.png') {
            img.src = 'images/product__favourite.png'
      }
      else {
        img.src = 'images/product__favourite--true.png'
      }
      
      console.log(img.src)
     })
    
  });

<button class="product__favourite">
    <img src="images/product__favourite--true.png" alt="">
</button>

<button class="product__favourite">
    <img src="images/product__favourite--true.png" alt="">
</button>

<button class="product__favourite">
    <img src="images/product__favourite--true.png" alt="">
</button>

<button class="product__favourite">
    <img src="images/product__favourite--true.png" alt="">
</button>

Answer 2

не скорей так

const buttons = document.querySelectorAll(".product__favourite");
 buttons.forEach((button) => {
    button.addEventListener('click', () =>{
     const img = button.querySelector('img');
   
     if(img.getAttribute('src') === `images/product__favourite.png`){
      img.src = `images/product__favourite--true.png`;
     } else {
      img.src = `images/product__favourite.png`;
     }
      
    })
    
   });

БЛОГ НА HUSL

как добавить и убрать что-то вроде класса active на чистом js

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