"Stroboskop", wo liegt der Fehler?

1337hAx'

Lt. Junior Grade
Registriert
Juli 2012
Beiträge
338
Hallo, ich komm irgendwie schon seit einer Stunde nicht drauf, wo der Fehler liegen könnte. Eigentlich sollte das untere linke Rechteck alle 250ms die Farbe wechseln, es passiert aber nichts, chrome Fehlerkonsole gibt nichts aus...

HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>
<link href="tehstylesheet.css" rel="stylesheet" type="text/css">

</head>

<body>

<div id="tl">1</div>
<div id="tr">2</div>
<div id="bl">3</div>
<div id="br">4</div>

</body>

<script type="text/javascript">
function augenkrebs(f1, f2, f3, id)
{
	var hintergrundFarbe = window.document.getElementById(id).style.backgroundColor;
	
	if (f1 == hintergrundFarbe)
	{
		hintergrundFarbe = f2;
	}
	else if (f2 == hintergrundFarbe)
	{
		hintergrundFarbe = f3;
	}
	else
	{
		hintergrundFarbe = f1;
	}
	
}

window.setInterval("augenkrebs('red','blue','brown','bl')", 250);
</script>

</html>

Stylesheet:

Code:
@charset "utf-8";
/* CSS Document */

div {
	height: 50%;
	width: 50%;
}

#tl {
	background-color:yellow;
	position: absolute;
	top: 1px;
	left: 1px;
}

#tr {
	position: absolute;
	top: 1px;
	right: 1px;
	background-color:red;
}

#bl {
	background-color:gray;
	position: absolute;
	bottom: 1px;
	left: 1px;
}

#br {
	position: absolute;
	bottom: 1px;
	right: 1px;
	background-color: green;
}
 
Zuletzt bearbeitet:
Ich bin kein Programmierer - nicht mehr :D - aber bist du dir sicher das der Bereich "unten rechts" nicht evtl. hinter der Taskleiste verschwindet und du deshalb nichts siehst?
 
Der Fehler ist ein anderer... hier definierst du eine lokale variable:

var hintergrundFarbe = window.document.getElementById(id).style.backgroundColor;

und hier änderst du diese lokale Variable:

hintergrundFarbe = f1;

Welchen Effekt denkst du das das ändern einer rein lokalen Javascript-Variable auf das HTML-Dokument hat? ;-)

Du musst schon direkt auf das Element zugreifen und dort den Style ändern.


@slaves: ist zwar korrekt, die Browser haben aber alle einen Fallback das sie einen String einfach durch eval() jagen. Schlechter Stil, aber funktioniert.
 
@slaves Auf selfhtml steht's leider genau so wie ich es geschrieben habe, finde es auch ne ziemlich üble schreibweise.
@Jesterfox d.h., ich darf nicht sozusagen makro-artig ersetzen, sondern muss jedes mal window.document.getElement.... schreiben?

EDIT: Hab's raus, aber geht das nicht schöner?

Code:
...

function augenkrebs(f1, f2, f3, id)
{
	
	if (window.document.getElementById(id).style.backgroundColor == f1)
	{
		window.document.getElementById(id).style.backgroundColor = f2;
	}
	else if (window.document.getElementById(id).style.backgroundColor == f2)
	{
		window.document.getElementById(id).style.backgroundColor = f3;
	}
	else
	{
		window.document.getElementById(id).style.backgroundColor = f1;
	}
	
}

window.setInterval("augenkrebs('red','blue','brown','bl')", 250);

...
 
Zuletzt bearbeitet:
Jap stimmt, aber man sollte sich das gleich abgewöhnen ;-)

Du speicherst in der Variable nur die aktuelle Farbe des Elements.
Wenn du die Variable veränderst, greifst du aber nicht auf die Farbe des Elements zu, sondern auf die zwischengespeicherte Farbe des Elements.
kannst auch nach der letzten if eine einziges Mal die Farbe neu setzen mit:
Code:
window.document.getElementById (id).style.backgroundColor = hintergrundfarbe;
 
Zurück
Oben