Changing The Color Of A Selected Link That Is Embedded In A Table

I'm trying to use class names to change the color of a link after it has been selected, so that It will remain the new color, but only until another link is selected, and then it w

Solution 1:

You're looping through the siblings. If the links are in separate <td>'s then they're no longer siblings.

You can loop through all the links like this:

document.onclick = function(evt)
{
    var el = window.event? event.srcElement : evt.target;
    if (el && el.className == 'unselected')
    {
        var links = document.getElementsByTagName('a');
        for (var i = links.length - 1; i >= 0; i--)
        {
            if (links[i].className == 'selected')
                links[i].className = 'unselected';
        }
        el.className = 'selected';
    }

    returnfalse;
}

I've also added a return false; at the end of the function to stop you going to '#'

Solution 2:

Is there an error or is there just nothing happening? A good first step if you are a javascript beginner is to use a tool like Firebug so you see detailed error messages, and you can add in console.log statements to see what's going on while you run your code.

Solution 3:

By ‘in tables’ do you mean putting each link in its own cell? Because that would make this line:

var siblings = el.parentNode.childNodes;

fail to select other links outside of the cell. You'd have to find another way to signal which element is the link container.