changing an image with javascript on rails 4.0

Question

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:

HTML:

<div class="container">
 <div class="row">
  <div id="myImage" onclick="changeImage()" class="col-md-6 row-1 pic_1">
   <div class="c-imageBlock_content">
     <h2>Test</h3>
   </div>
 </div>
</div>

The main ID and Class to focus on here is id="myImage" and the class is pic_1.

CSS:

.pic_1 {
 background-image: image-url("rice_shrimp.jpeg");
 background-size: 100% 100%;
 border-radius: 15px;
 margin-left: 100px;
 width: 450px;
 height: 400px;
 }

JS is the following:

function changeImage() {
var image = document
.getElementById('myImage').style.backgroundImage="url(wine_glass.jpeg)"
 }

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.

BASED ON THE FIRST RESPONSE BELOW: I have modified my code this way:

CSS:

.background-1 {
background-image: image-url("rice_shrimp.jpeg");
background-size: 100% 100%;
border-radius: 15px;
margin-left: 100px;
width: 450px;
height: 400px;

}

.background-2 {
 background-image: image-url("wine_glass.jpeg");
 background-size: 100% 100%;
 border-radius: 15px;
 margin-left: 100px;
 width: 450px;
 height: 400px;
 }

HTML:

 <div class="container">
  <div class="row">
   <div id="MyImage" class="col-md-6 row-1 background-1">
    <div class="c-imageBlock_content">
     <h2>Test</h3>
    </div>
   </div>
  <div id="MyImage" class="col-md-6 row-1 background-2">
  <div class="c-imageBlock_content">
    <h2>Test</h3>
  </div>
</div>

JS:

 (function() {
 var myImageEl = document.getElementById('MyImage');
 var background2Enabled = false;

 function toggleBackground() {
background2Enabled = !background2Enabled;
myImageEl.className = background2Enabled ? 'background-2' : 'background-1';
}

 myImageEl.addEventListener('click', toggleBackground);
})();

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.

score 0 · Accepted Answer · answered Feb 23 '16 at 21:13

0

Use classes instead of styles. The reason is that the url() path is relative to the stylesheet. So if you place the change in the CSS then you don't have to worry about the relative path. It is also more performant and maintainable.

Also, You might want to avoid onclick="" attributes. When you use them their logic get hidden inside markup and you will have difficulty scaling/refactoring your code if you do so. It is also interpreted as a string requiring a separate JIT compilation by the browser to run. It also can not be minified or statically analyzed.

(function() {
  var myImageEl = document.getElementById('MyImage');
  var background2Enabled = false;
  
  function toggleBackground() {
    background2Enabled = !background2Enabled;
    myImageEl.className = background2Enabled ? 'background-2' : 'background-1';
  }
  
  myImageEl.addEventListener('click', toggleBackground);
})();

.background-1 {
  background-image: url('background-image-1.jpeg');
  color: red;
}

.background-2 {
  background-image: url('background-image-2.jpeg');
  color: green;
}

<div id="MyImage" class="background-1">
  <p>foobar</p>
</div>

answered Feb 23 '16 at 21:13

Sukima

9,965
3
46
60

Thank you for your response, I made the changes you said-see above for new code but now getting this error: Uncaught TypeError: Cannot read property 'addEventListener' of null. I am currently researching that error. Any help with it would be great! Again, thank you for your help! – ravenUSMC Feb 23 '16 at 21:52
That means the statement `document.getElementById('MyImage')` found nothing. Are you sure you have a div with the correct ID? Are you sure you placed the JavaScript at the bottom of the page so the DOM is ready at time of execution? – Sukima Feb 23 '16 at 21:54
Yup, JS not at bottom of the page was the issue-I had it in my JS file in rails. It works but the formatting is off-I think because I have an issue with my classes but getting the JS to work was my main issue! Thank you and have a great day! – ravenUSMC Feb 23 '16 at 22:15
Thank you for that link! – ravenUSMC Feb 23 '16 at 22:18

changing an image with javascript on rails 4.0

1 Answers1