• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Border Color Change

A

Akecheta

New member
Hallo, ich versuche gerade die ganze zeit mit Javascript einen Border farblich zu wechseln.

ich habe hier bereits versucht, das wissen was ich habe dazu einzusetzen :( was beim Javascript nicht wirklich viel ist. Aber was sei schon dabei... man lernt schließlich noch dazu...

also ich habe bereits das hier..

HTML: 
<script language="JavaScript" type="text/javascript">
function border_red() {
	document.getElementById("rajah").style.border="2px solid red";
}
function schleife() {
	document.getElementById("rajah").style.border="2px solid green";
	window.setTimeout(border_red, 1000);
}
schleife();
window.setTimeout(schleife, 2000);
</script>


nun habe ich das problem. das dieser Ganze abfragerei nur 2 mal durchläuft und dann endet... :( bin ratlos gerade wieso...

Benutze Goggle Chrome falls das irgendwas damit zu tun hat.
 
Schau mal:
HTML: 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Test</title>
	<style type="text/css">
#objekt{
	width:			50px;
	height:			50px;
}
.rot{
	border:			2px solid red;
}
.gruen{
	border:			2px solid green;
}
	</style>
</head>
<body>

<div id="objekt" class="gruen"></div>

<script>
	function toggle_farbe() {
		var element = document.getElementById('objekt');
		element.className = (element.className == 'rot' ? 'gruen' : 'rot');
		window.setTimeout(function() { toggle_farbe(); },2000);
	}
	toggle_farbe();
</script>

</body>
</html>
Bei Fragen frag ruhig!
 
Servus Akecheta.

Du führst schleife() genau zweimal aus:
- einmal durch den Aufruf in Zeile 9,
- dann nach 2000ms durch setTimeout(schleife...) aus Zeile 10,
danach nicht mehr.

Du könntest setTimeout(schleife...) in Funktion border_red() aufrufen, dann klappts.
Vermutlich willst du dann 1000ms statt 2000ms als Zeitspanne.

Gruß - Matthias

HTML: 
<!doctype HTML>
<html>
<head>
<meta charset="utf-8"/>
<style>
</style>
</head>
<body>

<div id="rajah" style="position:absolute; width:100px; height:100px;"></div>

<script language="JavaScript" type="text/javascript">

function border_red() {
	document.getElementById("rajah").style.border="2px solid red";
        window.setTimeout(schleife, 1000);
	}

function schleife() {
	document.getElementById("rajah").style.border="2px solid green";
	window.setTimeout(border_red, 1000);
	}

schleife();

</script>
</body>
</html>

Nachtrag: MicDoe's Code ist eleganter, was er weiter unten sagt ist natürlich richtig. Sofern Du mit CSS Klassen und Selektoren sowie der if/then Kurzschreibweise klarkommst schadet es nichts dort abzugucken.
 
Zuletzt bearbeitet:
Matthias, dein Code ist
  • unübersichtlich und dadurch schlecht wartbar, warum zwei Funktionen für die selbe Sache?
  • language="JavaScript" type="text/javascript" kann bei HTML 5 weggelassen werden.
  • Leere <style> Tags sind obsolet.
 
Er wollte wissen wo sein Denkfehler war, und das habe ich gezeigt - mit seinem Code (nicht meinem), weil mit komplett neuem Code ist vielleicht das Problem gelöst, aber die Frage nicht beantwortet.

Danke für die BBcodes - gibt's irgendwo eine Übersicht?
 
matiro65 schrieb:
Er wollte wissen wo sein Denkfehler war, und das habe ich gezeigt - mit seinem Code (nicht meinem), weil mit komplett neuem Code ist vielleicht das Problem gelöst, aber die Frage nicht beantwortet.
Zum Vergrößern anklicken....
Wir hatten hier mal irgendwann beschlossen, dass wir nicht nur die Frage beantworten sondern auch auf sonstige Sachen hinweisen, wenn es sich im Rahmen hält vom Aufwand her. Und jemandem seine Frage mit wiederum schlechtem Code zu beantworten ist nicht so gut, gerade dann, wenn der schlechte Code vom Fragesteller ist. Und meine Hinweise sind auch rein sachlich als Tipps zu werten, nicht als Kritik.

matiro65 schrieb:
Danke für die BBcodes - gibt's irgendwo eine Übersicht?
Zum Vergrößern anklicken....
Einfach im großen Editor die Maus auf die Schalter rechts halten. Sind nur 4 oder 5.
 
Dann will ich auch noch meinen Codesenf hinzufügen (HTML wie bei mikdoe):
Code: 
	(function toggleFarbe() {
		var element = document.getElementById('objekt');
		element.className = (element.className === 'rot' ? 'gruen' : 'rot');
		window.setTimeout(toggleFarbe,2000);
	}());
- könnte man noch etwas performanter gestalten, aber dann ist es nicht mehr ganz so kurz und knackig:
Code: 
(function(){
	var element = document.getElementById('objekt');
	(function toggleFarbe(){
		element.className = (element.className === 'rot' ? 'gruen' : 'rot');
		window.setTimeout(toggleFarbe,2000);
	}());
}());
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben