Dynamic styles help

[TheTot]

Here is the page in question:
http://lawlocaust.freezoka.com/members/tot/
(What you need to be looking at is the left side menu that says "In-game Info")

Here is the javascript (Providing this seperately because I have it externally linked on the page):

var xmlDoc;

if (window.ActiveXObject) {
	xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
}

else if (document.implementation.createDocument) {
	xmlDoc = document.implementation.createDocument("","",null);
}

else {
	alert('Your browser does not support XML');
}

xmlDoc.async = false;
xmlDoc.load("igi.xml");
var x = xmlDoc.getElementsByTagName("GAME");
var i;

function post() {
	document.getElementById("game").innerHTML = (x[i].getElementsByTagName("NAME")[0].childNodes[0].nodeValue);
	document.getElementById("server").innerHTML = (x[i].getElementsByTagName("SERVER")[0].childNodes[0].nodeValue);
	document.getElementById("ign").innerHTML = (x[i].getElementsByTagName("IGN")[0].childNodes[0].nodeValue);
	document.getElementById("class").innerHTML = (x[i].getElementsByTagName("CLASS")[0].childNodes[0].nodeValue);
	document.getElementById("lvl").innerHTML = (x[i].getElementsByTagName("LEVEL")[0].childNodes[0].nodeValue);
	document.getElementById("rank").innerHTML = (x[i].getElementsByTagName("RANK")[0].childNodes[0].nodeValue);
	document.getElementById("status").innerHTML = (x[i].getElementsByTagName("STATUS")[0].childNodes[0].nodeValue);
}

function ca() {
	i = 0;
	post();
}

function ms() {
	i = 1;
	post();
}

function pw() {
	i = 2;
	post();
}

function ao() {
	i = 3;
	post();
}

That is all you should need to know to help me with my problem.
Note: I don't care if it's messy, I don't care if it's not the best way to do what I'm doing, I don't care if I'm using way more code than I need to be using. It works, and I wrote the entire code myself so I'm proud of it. Whereas I typically enjoy receiving criticism that would further my understanding of Javascript, at this time I would really only like to get comments that help me with my problem.

Now, that being said...

PROBLEM!
What I have now works fine, yes. But I was trying to add something onto it. Right now, I have the links as #c0c0c0 (It's a moderate gray colour), and when you hover them, they become black. Previously, I was using a:active to make the links stay black when you clicked them (so navigators would know which choice they are on, obviously). However, as most of you probably know, this will stop working as soon as they click anywhere else.

So I turned to javascript to fix my problem. When I took on the task, I was fairly confident I knew how to achieve what I wanted. Here is the basic idea of what I tried:

function ca(from,to) {
            document.from = to;
	i = 0;
	post();
}

<a href="#" onclick="ca(this.style.color,#000000)">Combat Arms</a>

However, that worked to no avail.

I have a few theories which I did not test first. I thought that perhaps the #000000 needed to be in single quotes, such as:

<a href="#" onclick="ca(this.style.color,'#000000')">Combat Arms</a>

Also, my other theory was that it wasn't turning the text black because in my CSS, I specifically tell the links to be gray. And, if I recall correctly, when formatting a webpage, browsers always use external sheets, internal sheets, embedded sheets, and lastly inline sheets in that order. I didn't know if that mattered or not, just a theory.

So, my colleagues, after reading that hefty post, if anyone could provide any kind of help, it would be most appreciated.

[rangana]

Why are you referencing the form? I thought you want to change the color of the link.

I might be at mistake, but:

<a href="#" onclick="this.style.color='#000000'">Combat Arms</a>

[TheTot]

Originally Posted by rangana

Why are you referencing the form? I thought you want to change the color of the link.

I might be at mistake, but:

<a href="#" onclick="this.style.color='#000000'">Combat Arms</a>

I'm not sure I understand what you're talking about. o.o;
There isn't a single form on that entire page, so I'm a little bit confused as to what you mean.

Plus, what you're suggesting would only change the color (if that would even work, I didn't try it).
I need it to do a few things. I want it to turn the link black, but it still has to do the function "ca" when it is clicked.

[rangana]

Originally Posted by TheTot

I'm not sure I understand what you're talking about. o.o;
There isn't a single form on that entire page, so I'm a little bit confused as to what you mean.

My bad, I thought you typed document.form, what you had was document.from.

Anyway, what you're doing is a bit wrong.

Change this part:

<a href="#" onclick="ca(this.style.color,#000000)">Combat Arms</a>

...into:

<a href="#" onclick="ca(this,'#000000')">Combat Arms</a>

....and change this part:

function ca(from,to) {
            document.from = to;
	i = 0;
	post();
}

...into:

function ca(from,to) {
from.style.color=to;
	i = 0;
	post();

Hope that helps.

[TheTot]

Thanks, that worked fabulously!