document.getElementById('').src == ??? (is equal to FAIL)

Question

My javascript is

function changeImage(imgID) {
var baseurl = "media/images/";
if (document.getElementById(imgID).src == baseurl+"selection-off.png") {
    alert('Success');
    document.getElementById(imgID).src = baseurl+"selection-no.png"; }
else {
    alert('Fail'); } }

and my HTML is

<div id="mustard" class="checkbox"><img id="mustard-img" class="no-off" src="media/images/selection-off.png" alt="checkbox" onClick="changeImage('mustard-img')" /></div>

I always get Fail when clicking the image. I must be missing something really elementary.

Answer 1

Are you sure the DOM is built when the script is loaded ?

Answer 2

Alert string document.getElementById(imgID).src. It might be taking complete path i.e. including host name while the string you are comparing with has relative path.

Answer 3

Some browsers convert the img src to the full url (including http://www....)

try alerting it to make sure..

You could use the

document.getElementById(imgID).src.indexOf( baseurl+"selection-off.png" ) >= 0

which checks if one string is contained in the other..

Answer 4

It's because the src attribute is changed by the browser. Don't do it that way, the proper way to check and change the css class or style attribute instead.

Answer 5

I tried your code on my own server.

Result:

document.getElementById(mustard-img).src is 'http://localhost/webfiles/media/images/selection-off.png'

baseurl+"selection-off.png" is 'media/images/selection-off.png'

baseurl seems to show the relative url only. So that is the reason why "Fail" gets alerted.

Answer 6

Image-based checkboxes are quite common, but here is the full solution.

1) Render actual checkboxes first. These work for 100% of browsers.

2) When the page loads, place your "image checkbox" next to the checkbox and hide the checkbox

3) When the image is clicked, toggle the checkbox and use the hidden checkbox to ascertain the state of the image.

When the form is POST-ed, the checkboxes will act like normal checkboxes. If JavaScript is disabled or otherwise not available the form is still usable.

Answer 7

Try with the following code:

 <div id="mustard" class="checkbox"><img id="mustard-img" class="no-off" src="media/images/selection-off.png" alt="checkbox" onClick="changeImage(this)" /></div>

 <script>
 function changeImage(img) {
  if (img.src.indexOf('selection-off.png')) {
      alert('Success');
      img.src.replace(/selection-off.png/, 'selection-no.png');
  }else{
      alert('Fail');
  }
 }
 </script>

The differences with your code:

• passing the img reference: this instead of the id in the onclick function
• use indexOf instead of ==, for relative paths