javascript - document.getElementById('').src == ??? (is equal to FAIL) - Stack Overflow

admin管理员组

文章数量:1208153

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.

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.

• javascript

Share Improve this question Follow asked Oct 19, 2010 at 7:28 jsejcksnjsejcksn 33.7k55 gold badges4747 silver badges7373 bronze badges

Add a comment  | 

7 Answers 7

Sorted by: Reset to default 5

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..

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.

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.

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

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

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.

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.

本文标签： javascriptdocumentgetElementById(3939)src (is equal to FAIL)Stack Overflow