Как я могу использовать JavaScript для изменения изображения в моем <section>нажатием кнопки?

Question

Я делаю сайт, и в разделе этого сайта есть фоновое изображение. Я создал кнопку и написал код JS для достижения этой цели, однако, похоже, он не работает. Идентификатор кнопки - «mode», а идентификатор раздела - «aboutSection». Кажется, я не могу найти, где ошибка, и я действительно надеюсь, что это не просто опечатка (я тщательно просматривал код).

Вот мой JS код:

let imgArray = new Array();

imgArray[0] = new Image();
imgArray[0].src = 'sky1.jpg';

imgArray[1] = new Image();
imgArray[1].src = 'sky2.jpg';

imgArray[2] = new Image();
imgArray[2].src = 'sky3.jpg';

var i = 0;


document.querySelector('#mode').addEventListener('click', () =>{
    i = i < imgArray.length ? ++i : 0;
    document.querySelector('#aboutSection').style.backgroundImage = imgArray[i];
})

Заранее благодарю за любую помощь.

Answer 1

Фоновые изображения принимают URL:

https://www.w3schools.com/html/html_images_background.asp

document.querySelector('#aboutSection').style.backgroundImage = "url('" + imgArray[i].src + "')"

Хотя в этом примере ваш массив должен быть массивом строк / путей.