js If / else оператор на втором клике, чтобы повернуть изображение

Question

Мне нужно повернуть изображение на том же атрибуте onClick. Таким образом, после первого щелчка изображение1 должно измениться на изображение2, а при втором щелчке изображение2 должно измениться на изображение1. Я написал код ниже, но он меняется только один раз, с изображения 1 на изображение 2, но второй щелчок ничего не работает.

function changeImage() {
  if (document.getElementById("image").src == "./images/image1.jpg") {
    document.getElementById("image").src = "./images/image3.jpg";
  }

  else {
    document.getElementById("image").src = "./images/image1.jpg";
  }
}

Answer 1

Как сказал t@terrymorse - вместо оператора сравнения вместо оператора сравнения есть оператор присваивания. Однако есть более простой способ добиться вашего переключения.

Создайте массив изображений sr c и нажмите кнопку увеличения значения счетчика, который затем используется с оператором по модулю для выбора другого sr c, который применяется к изображению.

Используя этот подход, вы можете иметь любое количество изображений - и нажатие кнопки будет циклически перемещаться по массиву и возвращаться к начальному изображению, когда модуль == 0.

const images =[
'https://www.warrenphotographic.co.uk/photography/bigs/15234-Cream-and-white-fluffy-kitten-sitting-white-background.jpg',
'https://image.freepik.com/free-photo/little-fluffy-kitten-maine-coon_106368-5.jpg'
];

const imgsLength = images.length;
const image = document.getElementById("image");
 
function changeImage(el) {
   const newIndex = parseInt(el.getAttribute('data-index'))+1;
   el.setAttribute('data-index', newIndex);
   const  newSrc= images[newIndex % imgsLength];
   image.src = newSrc;
}

<button data-index="0" onclick="changeImage(this)" >Change Image</button>

<hr/>

<img id="image" src="https://www.warrenphotographic.co.uk/photography/bigs/15234-Cream-and-white-fluffy-kitten-sitting-white-background.jpg" width="150">

Answer 2

У вас есть оператор присваивания, когда вы намеревались сравнить. Измените это:

if (document.getElementById("image").src = "./images/image1.jpg") {

на это:

if (document.getElementById("image").src === "./images/image1.jpg") {

Рабочий пример:

function changeImage() {
  if (document.getElementById("image").src ===
    "https://via.placeholder.com/100x150") {
    document.getElementById("image").src =
      "https://via.placeholder.com/150x100";
  }

  else {
    document.getElementById("image").src =
      "https://via.placeholder.com/100x150";
  }
}

<button onclick="changeImage()">Change Image</button><br/><br/>

<img id="image" src="https://via.placeholder.com/100x150">