Изменить фото в теге picture при клике на кнопку

Question

Проблема следующая. Картинки находясь в теге picture при клике на кнопку не изменяются, но если убрать этот тег, остается только тег img и все работает, тажа самая беда происходит, если все это через json делать (так, к слову)

let blockFourInstructorPhoto = document.querySelector('.our-instructor__picture');

for (let instuctorCount = 0; instuctorCount < blockFourInstructorList.length; instuctorCount++) {
   
   blockFourInstructorList[instuctorCount].addEventListener('click', event => {

  if (blockFourInstructorList[instuctorCount].innerText === 'Максим Казаков') {
    blockFourInstructorPhoto.src = '../img/04-block.our-instructor_maksim.png';            
        }
  else if (blockFourInstructorList[instuctorCount].innerText === 'Настя Антипова') {
     blockFourInstructorPhoto.src = '../img/04-block.our-instructor_nastya.png';
        }
    })
}

<picture class="our-instructor__set-of-pictures">
  <source media="(min-width: 1530px)" data-srcset="../img/04-block.our-instructor_1080px.png">
  <source media="(min-width: 768px)" data-srcset="../img/04-block.our-instructor_768px.png">
  <img class="lazy our-instructor__picture" data-src="../img/04-block.our-instructor_375px.png" alt="Фото преподавателя йоги" draggable="false">
</picture>

 <ul class="our-instructor__teacher-list col-md-4">
   <li class="our-instructor__teacher-item common-hover-before" teacherID="Максим Казаков">Максим Казаков</li>
   <li class="our-instructor__teacher-item common-hover-before" teacherID="Настя Антипова">Настя Антипова</li>
   <li class="our-instructor__teacher-item common-hover-before" teacherID="Катя Стреженова">Катя Стреженова</li>
   <li class="our-instructor__teacher-item common-hover-before" teacherID="Мария Жукова">Мария Жукова</li>
   <li class="our-instructor__teacher-item common-hover-before" teacherID="Сергей Кириев">Сергей Кириев</li>
 </ul>

БЛОГ НА HUSL

Изменить фото в теге picture при клике на кнопку

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