title: changing an image with javascript on rails 4.0
body: <p>I am currently working on how to change a background image, with Javascript, on rails. I essentially have two small images that are set as small background images so that I have writing on top of them. The code looks like this: </p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div class="container"&gt;
   &lt;div class="row"&gt;
    &lt;div id="myImage" onclick="changeImage()" class="col-md-6 row-1 pic_1"&gt;
     &lt;div class="c-imageBlock_content"&gt;
       &lt;h2&gt;Test&lt;/h3&gt;
     &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The main ID and Class to focus on here is id="myImage" and the class is pic_1. </p>
  
  <p>CSS: </p>
  
  <pre><code>.pic_1 {
   background-image: image-url("rice_shrimp.jpeg");
   background-size: 100% 100%;
   border-radius: 15px;
   margin-left: 100px;
   width: 450px;
   height: 400px;
   }
  </code></pre>
  
  <p>JS is the following: </p>
  
  <pre><code>function changeImage() {
  var image = document
  .getElementById('myImage').style.backgroundImage="url(wine_glass.jpeg)"
   }
  </code></pre>
  
  <p>I know that my JS may not be complete. However, my main question is about the routing path-is it correct with just wine_glass.jpeg? I have never changed an image in rails but have done it plenty of times in a normal HTML/CSS document. Any help on how to do this, in rails, would be appreciated. Thank you! Please let me know if you need more information posted. </p>
  
  <p>BASED ON THE FIRST RESPONSE BELOW: 
  I have modified my code this way: </p>
  
  <p>CSS: </p>
  
  <pre><code>.background-1 {
  background-image: image-url("rice_shrimp.jpeg");
  background-size: 100% 100%;
  border-radius: 15px;
  margin-left: 100px;
  width: 450px;
  height: 400px;
  </code></pre>
  
  <p>}</p>
  
  <pre><code>.background-2 {
   background-image: image-url("wine_glass.jpeg");
   background-size: 100% 100%;
   border-radius: 15px;
   margin-left: 100px;
   width: 450px;
   height: 400px;
   }
  </code></pre>
  
  <p>HTML: </p>
  
  <pre><code> &lt;div class="container"&gt;
    &lt;div class="row"&gt;
     &lt;div id="MyImage" class="col-md-6 row-1 background-1"&gt;
      &lt;div class="c-imageBlock_content"&gt;
       &lt;h2&gt;Test&lt;/h3&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;div id="MyImage" class="col-md-6 row-1 background-2"&gt;
    &lt;div class="c-imageBlock_content"&gt;
      &lt;h2&gt;Test&lt;/h3&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
     </p>
  
  <p>JS: </p>
  
  <pre><code> (function() {
   var myImageEl = document.getElementById('MyImage');
   var background2Enabled = false;
  
   function toggleBackground() {
  background2Enabled = !background2Enabled;
  myImageEl.className = background2Enabled ? 'background-2' : 'background-1';
  }
  
   myImageEl.addEventListener('click', toggleBackground);
  })();
  </code></pre>
  
  <p>Although I am now getting an error of Uncaught TypeError: Cannot read property 'addEventListener' of null. Not sure what this is but currently researching it. </p>