Изображение не изменилось в jQuery setAttribute

Question

Я пытаюсь изменить изображения, основываясь на том, что пользователь нажал следующую кнопку, но этого не происходит

var my_image = document.getElementById(main_image);

var image_array = ["https://www.w3schools.com/jsref/klematis2.jpg"];

var image_index = 1;

function change_image(){
	my_image.setAttribute("src", image_array[image_index]);
	image_index++;
	if(image_index > 1){image_index = 0;}
}

<img src="https://www.w3schools.com/jsref/klematis.jpg" id ="main_image">

		<button onclick="change_image()"> next </button>

Answer 1

document.getElementById() должна быть передана строка.Если main_image является элементом, а не строкой, это может быть вашей проблемой.

Answer 2

Передайте строку в document.getElementById ().Я надеюсь, что это работает для вас.

Answer 3

В качестве альтернативы вы можете запросить выбор.Во-вторых, вместо использования onClick в кнопке используйте addEventListener.

`let my_image = document.querySelector (" # main_image ");

let nextBtn = document.querySelector("button")
let image_array = ["https://www.w3schools.com/jsref/klematis2.jpg"];

let image_index = 0;

const change_image =() => {
my_image.setAttribute("src", image_array[image_index]);
image_index++;
if(image_index > 1){image_index = 0;}
}
nextBtn.addEventListener("click", change_image)

` Ответ дан, яулучшается только синтаксис

Answer 4

В вашем коде есть 2 проблемы:

1 - getElementByID ожидает строку.Не ставя кавычки вокруг «main_image», javascript считает, что main_image - это имя переменной, а не значение.

2 - ваш массив имеет только один элемент, поэтому его позиция равна 0, а не 1.

Ниже ваш код работает:

var my_image = document.getElementById("main_image");

var image_array = ["https://www.w3schools.com/jsref/klematis2.jpg"];

var image_index = 0;

function change_image(){
	my_image.setAttribute("src", image_array[image_index]);
	image_index++;
	if(image_index > 1){image_index = 0;}
}

<img src="https://www.w3schools.com/jsref/klematis.jpg" id ="main_image">

		<button onclick="change_image()"> next </button>

Answer 5

Похоже, ваш индекс массива установлен неправильно