getElementsByClassName to change the style of elements when event occurs [duplicate]

As the function name suggests getElementsByClassName returns a collection not just one object. So you need to loop through them and apply the color to it.

document.getElementsByClassName()
                   ^_______

Plus your id part is invalid. Id cannot have spaces and also it shouldn’t appear again on the page which is violated by:

<th id="colorswitcher A" onmouseover="document.getElementsByClassName('a').style.background='red'">a</th>
<th id="colorswitcher B" onmouseover="document.getElementsByClassName('a').style.background='blue'">b</th>

You can do it this way (You can look up what is a handler and try play yourself with it.), don’t use inline attributes for handlers.

window.onload=function(){
    var aColl = document.getElementsByClassName('a'); //Cache the collection here, so that even a new element added with the same class later we can avoid querying this again by using the cached collection.
    var bColl = document.getElementsByClassName('b');

    document.getElementById('A').addEventListener('mouseover', function(){
        changeColor(aColl, 'red');
    });

    document.getElementById('B').addEventListener('mouseover', function(){
        changeColor(bColl, 'blue');
    });
}
function changeColor(coll, color){

    for(var i=0, len=coll.length; i<len; i++)
    {
        coll[i].style["background-color"] = color;
    }
}

Fiddle

If you are really trying to do it for some real work, then don’t change the style attribute, instead define classes and add/remove classes on mouseover, mouseout events so that you get the power of css’ cascading property.