I am trying to implement a feature where clicking a button will change the background of my HTML file, and then revert back to the original background when clicked again.
To achieve this, I have set up a map containing key/value pairs. The first pair consists of the original background as the key and the new background as the value, while the second pair reverses this relationship.
Here is the code snippet:
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];
}
While it seems like this should work, I encounter an error in the console:
index.html:197 Uncaught ReferenceError: url is not defined
This error specifically points to the value of the second key/value pair, `url('/images/pexels_bg.jpeg')`.
The file mentioned definitely exists. Could it be that URL cannot be used as a value for a key, or is there something else I am overlooking?
Any guidance or advice on this issue would be greatly appreciated. Thank you.