Autor Zpráva
Taurus
Profil
Rád bych po zatržení checkboxu obarvil všechny třídy na jinou barvu.
getElementById mi obarvuje jen první výskyt, getElementsByClassName/TagName mi nefungovalo ani při změně id na class.
Jsem na javaskript blbý, mohl by mi někdo, prosím, poradit? Díky.

Živě: http://jpw.odemne.com/prebarvi/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Změna obarvení</title>
<style type="text/css">
body {margin: 20px; font: 1.5em Georgia}
#cervena {color: #c00; font-weight: bold}
.zelena {color: #0a0!important}
#vypis {float: left; width: 360px; font-style: italic; font-weight: bold}
input {margin-top: 8px}
</style>

<script type="text/javascript">
function zelena(){
	if (document.formular.skrt.checked) {
		document.getElementById('cervena').className = 'zelena';
		document.getElementById("vypis").innerHTML = "Zčervenej zelené pštrosy";
	}
	else {
		document.getElementById('cervena').className = 'cervena';
		document.getElementById("vypis").innerHTML = "Zezelenej červené pštrosy";
	}
}
</script> 
</head>
<body>

<form name="formular">
	<span id="vypis">Zezelenej červené pštrosy</span>
	<input type="checkbox" onClick="zelena();" name="skrt">
</form>

<p>Šel pštros s pštrosicí a pštrošáčaty, jeden vypadal <span id="cervena">červeně</span>,<br />druhý a třetí vesele a poslední se <span id="cervena">červenal</span>.</p>

</body>
</html> 
Chamurappi
Profil
Reaguji na Taura:
Nejsnazší je změnit třídu společného rodiče a upravit CSS, aby se potomci elementu s danou třídou přebarvovali. Nepotřebuješ na to žádné speciální znalosti, stačí nastavovat document.getElementById("společný-rodič").className (nebo třeba document.body.className, pokud jde o celý dokument, společný rodič může být <body>) a pak přizpůsobit stylopis přítomnosti té jedné třídy.
Taurus
Profil
Děkuju moc, prosté jako já. :-)

Přidávám řešení a odkaz jsem aktualizoval.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Změna obarvení</title>
<style type="text/css">
	body {margin: 20px; font: 1.5em Georgia}
	.cervena {color: #c00; font-weight: bold}
	body.prebarvene .cervena {color: #0a0}
	#vypis {float: left; width: 360px; font-style: italic; font-weight: bold}
	input {margin-top: 8px}
</style>

<script type="text/javascript">
function obarvi(){
	if (document.formular.skrt.checked) {
		document.body.className = 'prebarvene';
		document.getElementById("vypis").innerHTML = "Zčervenej zelené pštrosy";
	}
	else {
		document.body.className = '';
		document.getElementById("vypis").innerHTML = "Zezelenej červené pštrosy";
	}
}
</script> 
</head>
<body>

<form name="formular">
	<span id="vypis">Zezelenej červené pštrosy</span>
	<input type="checkbox" onClick="obarvi();" name="skrt">
</form>

<p>Šel pštros s pštrosicí a pštrošáčaty, jeden vypadal <span class="cervena">červeně</span>,<br />druhý a třetí vesele a poslední se <span class="cervena">červenal</span>.</p>

</body>
</html> 

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: