OnClick="MakeActive();"

[pro_se]

Hey all! I have not been active in this community for a while (school started)... Anyways, I ran into a problem when I was creating a project for a friend and this is the problem: I want to be able to click somthing (a text button, in this case) and make the buttons class change to active.

I'm sure that all of you have seen those web2.0 templates where someone clicks a button and the button becomes active without reloading the page, that is what I am attempting. I am posting the code...

[u][b]javascript.js[/b][/u]
[code]function MakeActive() {

var NAME = getElementById("maintabs")

document.NAME.className="active"

}[/code]

[u][b]index.html[/b][/u]
[code]<div class="bar">
<ul id="maintabs" class="SearchSelect">
<li class="slogan">Search Categories:</li>
<li id="1" class="active"><a href="#" onclick="MakeActive();">Bands</a></li>
<li id="2"><a href="#" onclick="MakeActive();">Artists</a></li>
<li id="3"><a href="#" onclick="MakeActive();">Music</a></li>
<li id="4"><a href="#" onclick="MakeActive();">Pictures</a></li>
<li id="5"><a href="#" onclick="MakeActive();">Gigs</a></li>
</ul>
</div>[/code]

Thanks for all your help!  You guys are always great!!!

[Psycho]

Just a formatting mistake. You need to take the "document." off of the 2nd line in the function and add it to the first one. Plus you should end the lines with semecolons.

[code]function MakeActive() {

var NAME = document.getElementById("maintabs");

NAME.className="active";

}[/code]

[pro_se]

That still does not work! Ahh... This is so annoying!

...anyone else with comments?

[Psycho]

Yes, it does. You must not have set up your styles appropriately. Plus, the way you have it, when a link is clicked, the entire list of items will be changed to the active class

Just add this to the head of your page with the DIV section above and the JS code provided.
[code]<style>
.active {color:red;}
</style>[/code]

[pro_se]

so how would i make it so that it will only make the one that is clicked turn red?

[radalin]

instead of MakeActive() use something like

function MakeActive(activeBox) {
activeBox.class = "active";
}

and while calling the function use something like:

<li id="4"><a href="#" onclick="MakeActive(this);">Pictures</a></li>

hope this helps