<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Checkboxtest</title>
<script type="text/javascript">
function MachFarbig() {
if (document.Auswahl.Farbe[0].checked) { document.getElementsByClassName("redText").backgroundColor = "red"; }
else { document.getElementsByClassName("redText").backgroundColor = ""; }
if (document.Auswahl.Farbe[1].checked) { document.greenText.backgroundColor = "green"; }
else { document.greenText.backgroundColor = ""; }
if (document.Auswahl.Farbe[2].checked) { document.blueText.backgroundColor = "blue"; }
else { document.blueText.backgroundColor = ""; }
}
</script>
<style type="text/css">
.redText { background-color: #00ffff; }
.blueText { background-color: #00ffff; }
.greenText { background-color: #00ffff; }
</style>
</head>
<body>
<form name="Auswahl">
<p>
<input type="radio" onclick="MachFarbig()" name="Farbe" value="red"> Rot
<input type="radio" onclick="MachFarbig()" name="Farbe" value="green"> Gruen
<input type="radio" onclick="MachFarbig()" name="Farbe" value="blue"> Blau
</p>
</form>
<div style="width:70%;">
<strong>Text.</strong>
<p style="text-align:justify; text-size:11pt; margin-top:5px">
Hier steht ein langer Text. Bei Auswahl der Checkboxen soll an verschiedenen Textstellen die Hintergrundfarbe gewechselt werden, wenn die entsprechende Box gesetzt ist. Das Wort <span class="redText">Rot</span> soll immer einen roten Hintergrund haben, <span class="greenText">Gruen</span> soll einen gruenen Hintergrund bekommen und <span class="blueText">Blau</span> entsprechend einen blauen Hintergrund.
</p>
</div>
</body>
</html>
So habe ichs jetzt probiert, aber funktionieren tut das noch nicht. Greife ich falsch auf die klasse zu?