使用 JS 为背景 url 创建一个 const 以更改背景

Question

我有一个按钮，我希望能够通过单击按钮来更改我的 html 文件的背景，然后在再次单击时再次更改回原始 URL。

所以我创建了一个带有键/值的地图。第一个键将是原始背景，它的值将是新背景。与第二个键/值对相反。

下面是我的代码

    const nextBackgroundImageUrl = {
        "url('../images/pexels_bg.jpeg')" : url('/images/bbyshrk.jpg'),
        "url('../images/bbyshrk.jpg')" : url('/images/pexels_bg.jpeg')
        }


function changeImg() {

    const currentBackgroundUrl = elem.style['background-url'];

    elem.style['background-url'] = nextBackgroundImageUrl[currentBackgroundUrl];

}

看来这应该可行？除了，我在控制台中收到错误：

index.html:197 Uncaught ReferenceError: url is not defined

参考第二个键/值对的VALUE，url('/images/pexels_bg.jpeg')

这个文件确实存在。

是不是 URL 不能用作键的值？还是我错过了其他东西。

任何建议都有帮助，谢谢。

Answer 1

在这里，值中的 url 被视为变量。改成字符串

const nextBackgroundImageUrl = {
  "url('../images/pexels_bg.jpeg')": "url('/images/bbyshrk.jpg')",
  "url('../images/bbyshrk.jpg')": "url('/images/pexels_bg.jpeg')"
}