title: Creating a const with JS for background url to change background
body: <p>I have a button and I want to be able to change the background of my html file via the button click, and then again change back to original URL when clicked again.</p>
  
  <p>So I created a map with key/values. First key will be original background, and it's value will be the new background. And opposite with the second key/value pair. </p>
  
  <p>Below is my code</p>
  
  <pre><code>    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];
  
  }
  </code></pre>
  
  <p>It seems this should work? Except, I am getting an error in the console:</p>
  
  <pre><code>index.html:197 Uncaught ReferenceError: url is not defined
  </code></pre>
  
  <p>in reference to the VALUE of the second key/value pair,  url('/images/pexels_bg.jpeg')</p>
  
  <p>This file definitely exists. </p>
  
  <p>Is it that URL cannot be used as a value to a key? Or am I missing something else.</p>
  
  <p>Any advice helps, thanks.</p>