жарко сделать оператор IF, чтобы распознать изображение внутри div и изменить его с помощью функции onclick?

Question

У меня проблема, я пытаюсь создать веб-сайт (и мои навыки JS все еще не очень хороши), у меня есть функция onclick, которая заставит JS отобразить изображение внутри div ("gallerym")

Я уже несколько дней пытаюсь поработать над новой функцией oncklick: up (), в основном, это стрелка вверх, и с помощью оператора IF он должен распознать изображение внутри «gallerym» и показать другое изображение внутри «gallerym».

лучшее, что я мог, это код, который создал еще одну "галлерию" и отображал оба изображения.

, пожалуйста, помогите мне найти правильный код.

Большое спасибо заранее!

       function up() {
   var gallerym = document.getElementById('gallerym');
   var myImage = gallerym.querySelector('img');
   var imageArray = ['../images/gallery/10cmto100cmm600x600.jpg', 
'../images/gallery/10cmto100cmt600x600.jpg',  

'.. / images / gallery / 1mto10mm600x600.jpg', '.. / images / gallery / 1mto10mm600x600.jpg'] var currentIndex = imageArray.findIndex (myImage.src) // Изменитьsrc к следующему изображению, но сначала проверяется, является ли src последним элементом, поэтому вместо этого вы возвращаетесь к первому элементу var lastItem = imageArray [imageArray.length - 1] myImage.src = imageArray [currentIndex] == lastItem?imageArray [0]: imageArray [currentIndex + 1] // Нет необходимости в операторе if снова}

Answer 1

Почему бы не добавить последний if / else к первому и просто сделать оператор else if.

var gallerym = document.getElementById('gallerym');
var myImage = gallerym.querySelector('img');

if (myImage.src == 'image1.jpg') {
    myImage.src = 'image2.jpg'
}else   if (myImage.src == 'image3.jpg') {
    myImage.src = 'image4.jpg'
} else if (myImage.src == 'image3.jpg') {
    myImage.src = 'image3.jpg'
}
 else {
    myImage.src = 'image1.jpg'
}

или оператор выписки

switch(myImage.src) {
  case 'image1.jpg':
    myImage.src = 'image2.jpg'
    break;
  case 'image3.jpg':
    myImage.src = 'image4.jpg'
    break;
  default:
    // code block
}

Answer 2

большое спасибо за попытку помочь !!я смог понять это:

вот что я сделал: работает как шарм

function up () {               
 if
(document.getElementById("gallerymain")
.getAttribute('src') 
 == "../images/gallery/image1.jpg") 
   {
    document.getElementById("gallerymain").src = 
 "../images/gallery/image2.jpg"
    }
  else if   
 (document.getElementById("gallerymain")
 .getAttribute('src') 
  == "../images/gallery/image3.jpg") 
    {
    document.getElementById("gallerymain").src = 
 "../images/gallery/image4.jpg"
    }
  }

Answer 3

Полагаю, функция up - это функция, которую вы передали в EventListener.

   function up() {
    var gallerym = document.getElementById('gallerym');
    var myImage = gallerym.querySelector('img');
    var imageArray = ['image1.jpg', 'image2.jpg', 'image3.jpg', 
                       'image4.jpg']
    var currentIndex = imageArray.findIndex(myImage.src)
    // Change the src to the next image, but first checking if the src is the last item, so you resest to first item instead
    var lastItem = imageArray[imageArray.length - 1]
    myImage.src = imageArray[currentIndex] == lastItem ? imageArray[0] : imageArray[currentIndex + 1]
    // No need for the if statement again
  }