[Nebagakid]

So, i am trying to make a link that's class will change when someone clicks on it. I do not know Javascript, but I do know CSS, and so far I have this line of code:

Code:
<a href="#" onclick="repalceImage(); 
return false;" rel="thephoto" class="front"> <span>this is where the photo goes</span></a>

with this script, and the results are none:

Code:
function replaceImage() {

var foto = document.getElementsBySelector('a[rel="thephoto"]')
for (i=0;i<foto.length;i++)
  if   ( foto.className == "front";)
{
 
  switchTo("back");
  }
  else if  ( foto.className == "back";) {

  switchTo("front");
  }
  }
  return null;
}

  
function switchTo(side){foto.className = side;}

Could someone give me some help, please?

[Chris O'Brien]

document.getElementsBySelector isn't actually a DOM method, but something that Simon Willison came up with a year or so ago. To use it, you'll need to include the js that makes it work.

For what you're doing though, it doesn't seem necessary to use it, unless you want to change a host of elements with the same class? If you're just changing one element (the one clicked) then this should work:

Code:
function replaceImage(el) {
    el.className = (el.className == "front") ? "back" : "front";
}

with the anchor looking like:

Code:
<a href="#" onclick="replaceImage(this); 
return false;" rel="thephoto" class="front"> <span>this is where the photo goes</span></a>

I've left in the rel attribute and the inner span because you had them...

[Millennium]

BlackBook is correct; getElementsBySelector() is not a standard in any browser, but a nifty little JavaScript routine that can help you with your own JavaScript stuff. To use it, though, you'll need to include his JavaScript alongside your own.

This said, there's another wrinkle to watch out for: it's possible to have more than one class on an element (all browsers, even IE/Windows, support this). It's highly useful for some things, but if you ever go that route then the technique of just replacing an element's className will become very dangerous. This is a serious problem with the DOM.

This page at Dean Edwards' site shows another technique which allows you to switch only the class you want, and leave alone any other classes which might be on the element you're switching. You don't have to use his IE7 JavaScript to make it work (though you may want to; as it's nothing short of godlike in what it does).

If you're interested in getElementsBySelector, by the way, then you may want to check out Dean Edwards' cssQuery engine. It seems to work in all browsers tested so far, and it's more powerful than getElementsBySelector, even though it works on the same principle.

[Nebagakid]

Thanks both, here is the finished product you helped me with:

Distinct Photos

(hint- click on the photos)