js更改背景功能不起作用

Question

我想创建一个简单的函数，当用户点击一个特定元素时改变它的背景

const chrollofunction = document.querySelectorAll("article .krolor");
const randomclickfunctionkro = function() {
const backgrounds = new Array();
backgrounds[0] = new Image();
backgrounds[0].src = 'pics/اليكيورا.jpg';
backgrounds[1] = new Image();
backgrounds[1].src = 'pics/pain.jpg';
backgrounds[2] = new Image();
backgrounds[2].src = 'pics/قزم2.jpg';
const randomindex = Math.floor(Math.random() * backgrounds.length);
const randombg = backgrounds[randomindex];

chrollofunction.style.backgroundColor = randombg;
console.log('The user clicked and changed the color to ' + randombg);
};
chrollofunction.onclick = randomclickfunctionkro;

所以我猜有一个问题与背景函数数组，但我不能真正理解它，我寻找它应该如何写和正确的语法，但找不到任何问题真的

Answer 1

你可以像这样改变一个元素的背景图像:

chrollofunction.style.backgroundImage = `url(${randombg.src})`;

你可能还需要添加一些样式，使图像适合容器:

chrollofunction.style.backgroundSize = "contain";
chrollofunction.style.backgroundRepeat = "no-repeat";