how to call td's id to change css style onclick

Question

see below is my code to change the background of a td onclick using javascript.

window.onload = function () {
    document.getElementById('auth').onclick=change;
};
function change(){
    this.className="authorised_reporter";
}

How to change css of another td simultaneously on clicking a td.see my html

<td id="main" class="account_holder">
<h1 align="center">Main Account Holder</h1></td>

<td id="auth" class="authorised_reportericon" >              
    <p align="center" style="color:black;font-size:16px;">Authorised Reporters</p></a>
</td>

What i expecting is onclicking authorised reporter's td,background of that td and main account holder td also get change.Is it possible in javascript.

Answer 1

Try this

window.onload = function () {
document.getElementById('auth').onclick=change;
};
function change(){
    this.className="authorised_reporter";
    document.getElementById('main').className="authorised_reporter";

}

Answer 2

Your question isn't very clear. From what you've said, it sounds like this is what you want to do, but I suspect that might not be the case ... :

function change() {
    this.className = "authorised_reporter";
    document.getElementById('main').className = "authorised_reporter";
}