在 JavaScript 中单击按钮时从图像数组更改背景图像

Question

我想在单击按钮时更改我的应用程序的背景图像。 我将图像放在一个数组中并随机选择背景图像。 下面是代码。

const background = [
  "image/2.png",
  "image/4.png",
  "image/9.png",
  "image/14.png",
  "image/12.png",
  "image/17.png",
];

function changeColor() {
  const getimage = `${
    background[Math.floor(Math.random() * background.length)]
  }`;
  document.querySelector("body").style.backgroundImage = 'url("getimage")';
  console.log(getimage);
}

控制台日志显示“单击按钮时” getimage变量正在随机变化。 但是在浏览器中，背景是不是变了？ 没有得到我想念的东西？

Answer 1

当您设置样式时，您将 url 设置为getimage作为字符串而不是元素。 要解决您的问题，您只需将其作为元素，或者作为

document.querySelector("body").style.backgroundImage = `url("${getimage}")`; // uses `` to include a variable using ${}

或者：

document.querySelector("body").style.backgroundImage = 'url("' + getimage + '")'; // adds the variable in the middle of the string

Answer 2

尝试插入 getimage

document.querySelector("body").style.background = `url(${getimage})`;