Question

does anyone know how I would do this within an HTML-5 web based application? ie I need to change the font colour of a name when a button is pressed. It’s for an application that easily shows when players are on or off court in a tennis tournament. so far I have an excel document of all the players loaded in to an html, this is one of the names for instance:

and buttons as follows:

so I assume I could write an if condition that states if that button is on, then the player’s name goes red or something.. I’m also struggling with layout, considering the names are in a table, the button just stays above the table wherever I put it. Any help is much appreciated, Louis.

Answer 1

You could simply add/remove a class instead of only changing the value.
This class can be referenced via CSS.

Example

.online_text {
    color: #00ff00;
}
.offline_text {
    color: #ff0000;
}

Your script should add/remove the property so you basically get this format:

<td ... class="online_text">Oliver Addison</td>

Adding the class as example:

document.getElementById("onoff").className += "online_text";