Please help w/ script comprehension

[Parablese]

I just kinda jumped into CSS/Javascript a couple days ago, I've gotten some basics down through trial and error but,

I'm trying to make a script where..
onClick of any Anchor with the class "artist", it's style (trying backgroundImage first, then hopefully textColor) will change.

<script language="text/javascript">
window.onload=function() {
   anc=document.getElementsByTagName('a');
for(c=0;c<anc.length;c++) {
if(anc[c].className=='artist'){
anc[c].onClick=this.style.backgroundImage='url(image/main03/ArrowDown.gif)';
		}
	}
}
</script>

There seems to be no errors (FireBug FFextension has been very helpful)
I'm wondering if I'm even going about it the right way, or if I should try something like.. onClick, changing the CSS style of the current A...

I'm just really lost.

Related question: Are CSS styles always chosen over things Javascript might change?

[jscheuer1]

Well, you should explicitly declare your variables. Events assigned in this manner need to have themselves formally declared as functions. And, javascript onclick is all lower case:

<script language="text/javascript">
window.onload=function() {
   var anc=document.getElementsByTagName('a');
for(var c=0;c<anc.length;c++) {
if(anc[c].className=='artist'){
anc[c].onclick=function(){this.style.backgroundImage='url(image/main03/ArrowDown.gif)';};
		}
	}
}
</script>

Declaring variables helps to prevent conflicts with other code. Using the correct case for events is essential, otherwise they will not get executed, as is using the formal function assignment when assigning an event this way.

Now, javascript usually succeeds in altering css styles. Always, in fact, if the javascript styles are instituted after the css styles are parsed and if the javascript styles carry equal or greater weight than the css styles.

Without seeing your page, I would have to guess (if you are still having problems) that since you are using the onclick event, the link is firing before you can see any result anyway. Changes made by javascript will not persist across pages or on reload of a page, unless preserved in and retrieved from cookies.

Another thing to keep in mind is that if you are using the onclick event and you don't want the link to fire, the event must return false:

function(){this.style.backgroundImage='url(image/main03/ArrowDown.gif)';return false;}

[Parablese]

Alright, cool, thanks for explaining that to me.

But, my links don't go anywhere; I'm just using CSS styled Anchors rather than a bunch of rollover images. The links have a href of "#", so, I've changed the code to match yours - leaving out the return false part. But I still can't seem to get it to function.

I just tried appending the onclick to the A tag manually, and it works.

<a href="#" class="artist" onclick="this.style.backgroundImage='url(image/main03/ArrowDown.gif)'">text</a>

So I guess there's something still wrong with my script. I really appreciate the help, but do you know what else might be wrong?

I thought about what other code I could show you..
But it's just CSS styles, and the Anchors lie inside a list, which lies inside a div.

[jscheuer1]

Using return false; is still a good idea as, in some browsers the href="#" still reloads the page. One other thing I see that could be a problem with your code is:

if(anc[c].className=='artist')

If there are other anchors that have no className, this might cause the code to stop on error so:

if(anc[c].className&&anc[c].className=='artist')

If you would like me to troubleshoot your code further, it would be best if you put up a demo on the web somewhere and supplied a link to it. Make sure all of the resource files (like the images and anything else the code may need to function properly) are available to it.

[Parablese]

Okay, I've setup a testbay with just the basic things intact.

(test site)

I realize my CSS is probably more complicated than it should be, but it was the only way I could figure to get things the way I wanted it.

I'd also like for it to somehow check if the background image is ArrowDown.gif, and onclick, it would change it back to Arrow.gif - if possible.

Futhermore, I've separated the script in question from the other scripts in the HEAD, because it seemed to be breaking other code.

[jscheuer1]

For some reason I cannot get your page to perform at all locally (I think it is something that freewebs does to prevent being used as a file host that causes that). I really see no reason why you should need any extra code at all though. I think you should probably be using either this script:

http://www.dynamicdrive.com/dynamici...tchcontent.htm

or this one:

http://www.dynamicdrive.com/dynamici...chcontent2.htm

Both of these allow you to configure images with the content triggers, unlike the switch menu script you have, which does not.

Also, this code:

/***********************************************
* Disable Text Selection script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
function disableSelection(target){
if (typeof target.onselectstart!="undefined") //IE route
	target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
	target.style.MozUserSelect="none"
else //All other routes (Opera)
	target.onmousedown=function(){return false}
target.style.cursor = "default"}
//disableSelection(document.body) //Disable text selection on entire body
//disableSelection(document.getElementById("mydiv")) //Disable text selection on element with id="mydiv"

is useless at best, just get rid of it.

[Parablese]

Ah, alright, I'll work on that.

As for the text selection script, I've been trying to rid of an annoyance I have. Whenever a link is clicked without the code, some text would end up being selected. I'm picky about the end product.. dunno, I just don't like that. There's really no need for the user to select text anyway, in my site.

But I digress. Thanks for your time, s'good to know what advice you gave me. Congrats when you reach 10k posts.