Trying to develop a simple function that alters the background of a specific element when it is clicked by the user
const customFunction = document.querySelectorAll("article .customClass");
const changeBackground = function() {
const backgrounds = new Array();
backgrounds[0] = new Image();
backgrounds[0].src = 'images/image1.jpg';
backgrounds[1] = new Image();
backgrounds[1].src = 'images/image2.jpg';
backgrounds[2] = new Image();
backgrounds[2].src = 'images/image3.jpg';
const randomIndex = Math.floor(Math.random() * backgrounds.length);
const randomBg = backgrounds[randomIndex];
customFunction.style.backgroundColor = randomBg;
console.log('The user clicked and changed the color to ' + randomBg);
};
customFunction.onclick = changeBackground;
Encountering an issue with the backgrounds function array, struggling to identify the problem despite having checked syntax and references. Any insights?