nicht angemeldet
Laufend sich aendernde Farbe
Hallo,
Nach dem ich gestern Nacht verzweifelt mit dem Problem gekaempft habe und bis jetzt keine Loesung gefunden habe, brauche ich Hilfe:
Im Programmieren mit anderen Sprachen etwas bewandt wollte ich eine DHtml Loesung finden um einen textbereich dynamisch seine Farbe aendern zu lassen.
Ich hatte dazu in ZWEI verschiedenen Dateien einmal
einen <p id=hea1> [text] </p> und einen <span id=Hea1> [text] </span> Bereich definiert.
Im Body steht: <body OnLoad="Init(255);"> [Inhalt] <body>
Damit sollte also die Javscript-Datei Init(); aufgerufen werden.
In meiner Javascript-Datei habe ich folgende function definiert:
function Init(x) {
var p;
if (x>100){
p = x-5;
document.GetElementsById("Hea1").style.color = "rgb("+p+",0,0)";
Windows.Timeout("Init(p);",500)};
if (x<100) {Init2(x);}
}
function Init2(x) {
var p;
if (x<250) {
p = x+5;
document.GetElementsById("Hea1").style.color = "rgb("+p+",0,0)";
Windows.Timeout("Init2(p);",500)};
if (x>250) {Init(x);}
}
Im Prinzip soll der folgende Effekt entstehen:
Beim Laden des Dokuments wird Init aufgerufen und die Anfangsfarbe des Textes rgb(250,0,0) = rot soll Schritt fuer Schritt dunkler werden (p = x-5) bis sie den Grenzwert rgb (100,0,0) erreicht und dann ueber Init2 wieder heller werden bis sie den Wert rgb (250,0,0) erreicht, dann soll es wieder dunkler werden.
Ueber Windows.Timeout (XXX, 500) wird das Interval bestimmt.
Aber da Javascript so einen schoenen Compiler hat der mir nur "Object expected" anzeigt, kann ich den Fehler nicht finden.
Meine bisherigen Ueberlegungen haben mich auf folgende moegliche Fehlerursachen gebracht:
1. <p> / <span> duerfen keine style.color haben oder
2. die rgb definition ueber p hat einen Fehler
Koennt ihr mir weiterhelfen?
Ich waere euch sehr dankbar!
Gruss, Max
-
Hallo Max,
document.GetElementsById("Hea1").style.color = "rgb("+p+",0,0)";
^^^^
probier es mal mit documentgetElementById("Hea1") ohne das sGrüßle & Gute Nacht,
dani
-
Hallo, Max!
einen <p id=hea1> [text] </p> und einen <span id=Hea1> [text] </span> Bereich definiert.
^^^^^^^^^^^^^^^^^^^^^^^
wozu? den sprichst du doch garnicht an mit deinem script.Im Body steht: <body OnLoad="Init(255);"> [Inhalt] < body>
^ ^ ^
document.GetElementsById("Hea1").style.color = "rgb("+p+",0,0)";
^
http://selfhtml.teamone.de/javascript/objekte/document.htm#get_element_by_id
id's müssen dateiweit eindeutig sein, also suchen wird nicht "elementS", sondern _ein_ "element".Windows.Timeout("Init(p);",500) };
^ ^ ^^^^^^^ ^ ^ ^
http://selfhtml.teamone.de/javascript/objekte/window.htm#set_timeout
das hat nix mit microsoft-bugware zu tun, sondern mit dem fenster des browsers.
javascript ist case-sensitiv.
die funktion heist _nicht: "Timeout" ;-) , bitte nachlesen.if (x<100) {Init2(x);}
und was passiert bei x=100 ?
warum nicht if-else?function Init2(x) {
siehe oben.
alle fehler hab ich zwar noch nicht gefunden, aber die solltest du erst mal korrigieren.
ich schau noch weiter.freundl. Grüsse aus Berlin, Raik
--
die Schläge, die Du bereitwillig hinnimmst, werden Dir eine größere Hilfe im Leben sein, als die, die Du für ungerechtfertigt ablehnst; denn einestages wirst auch Du die Fürsorge und Hilfe darin erkennen.
(c)XaraX http://forum.de.selfhtml.org/archiv/2004/4/77523/#m447546-
Hallo Raik,
Vielen Dank fuer deine Hilfe!
Ich habe mal die Fehler, die du genannt hast korrigiert. Ich habe deswegen keine Deklaration fuer x=100, da x niemals 100 wird. Hatte falschen Startwert hingeschrieben, eigentlich wars
<body onLoad="Init('252');">
Somit ist x immer groesser oder kleiner 100 bzw. 250.
Den <p> mit Hea1 war nur mal zum Ausprobieren, jetzt hab ich nur den <span> bereich.
Meine jetzigen Funktion sehen so aus:
function Init(x) {
var p;
if (x>100){
p = x-5;
document.getElementById("Hea1").style.color = "rgb("+p+",0,0)";
window.setTimeout("Init(p)",500)};
if (x<100) {Init2(x);}
}function Init2(x) {
var p;
if (x<250) {
p = x+5;
document.getElementById("Hea1").style.color = "rgb("+p+",0,0)";
window.setTimeout("Init2(p)",500)};
if (x>250) {Init(x);}
}Aber immer noch wird beim Laden der Datei der Fehler: "Object doesn't support this property oder Method" angegeben... :(
Ich bin fuer jede Hilfe dankbar !
Gruss, Max
-
Hi,
document.getElementById("Hea1").style.color = "rgb("+p+",0,0)";
Du hattest im vorherigen Posting was von <span id="hea1"> geschrieben. Hier benutzt Du aber Hea1.
function Init2(x) {
var p;
if (x<250) {
p = x+5;
document.getElementById("Hea1").style.color = "rgb("+p+",0,0)";
window.setTimeout("Init2(p)",500)};
if (x>250) {Init(x);}
}Findest Du diese Form der Einrückung/Klammersetzung übersichtlich?
Ich nicht - ich wollte schon schreiben, daß das erste if das zweite if enthält, bis ich dann zufällig noch die schließende geschweifte Klammer in der setTimeout-Zeile gesehen habe.Aber immer noch wird beim Laden der Datei der Fehler: "Object doesn't support this property oder Method" angegeben... :(
Benutz doch mal einen Browser, der brauchbare Javascript-Fehlermeldungen liefert, z.B. Mozilla.
Ansonsten: sag wenigstens, in welcher Zeile dieser Fehler gemeldet wird.
cu,
Andreas--
MudGuard? Siehe http://www.Mud-Guard.de/
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.-
Hallo Markus,
Das mit "Hea1" stimmt schon.
Mozilla darf ich auf Arbeit leider nicht verwenden...
<span id="Hea1">Text</span>
Sodele, das Script sieht jetzt so aus:
function Init(x) {
var p;
if (x>100){
p = x-10;
document.getElementById("Hea1").style.color = "rgb("+p+",0,0)";
window.setTimeout("Init('p')",500);
};
if (x<100) {
Init2(x);
};
}function Init2(x) {
var p;
if (x<250) {
p = x+10;
document.getElementById("Hea1").style.color = "rgb("+p+",0,0)";
window.setTimeout("Init2('p')",500);
};
if (x>250) {
Init(x);
};
}inzwischen kommt auch keine Fehlermeldung mehr, allerdings funktioniert nichts (Text ist rot und nix ist dynamisch) :(
Vom Gedanken ist es doch so:
ich gebe den Wert 231 vor, er wird eingelesen uns ist bei Init(x) groesser als 100, darum wir p= x-10 = 221 gesetzt.
Dieses p wird als Farbwert gesetzt und dann nach 0,5 sec. wieder an Init('p') uebergeben, welche p als x setzt. Das geht dann weiter bis x nicht mehr groesser als 100 ist.
Dann wird p = x an Init2('p') uebergeben, die dieses p als x behandelt und vergleicht: Ist p kleiner 250 wird p = x + 10 und dann als Farbwert eingesetzt. Am ende wird es dann wieder in Init2 eingefuegt und zwar solange bis der Wert groesser 250 wird. Dann wird er wieder an Init() uebergeben und das Spiel faengt von vorne an.Aber irgendwie klappt es nicht und ich hab mir die ganze Nacht um die Ohren gehauen.
ich bin fuer jede Hilfe dankbar...
Gruss, Max
-
Hi,
Hallo Markus,
Wer ist Markus?
Mozilla darf ich auf Arbeit leider nicht verwenden...
Du sollst Webseiten entwickeln, darfst aber dafür geeignete Tools nicht einsetzen?
window.setTimeout("Init('p')",500);
Hier wird Init mit dem String 'p' aufgerufen, nicht mit dem Wert der Variablen p.
cu,
Andreas--
MudGuard? Siehe http://www.Mud-Guard.de/
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.-
Hallo Andreas,
Markus? Warum schreib ich Markus --> Uebermuedung...
Sind Intranetseiten und hier ham alle IE...
Ausserdem ist WebDesign nur nebenbei und nicht als Hauptaufgabe gedacht ... :)
Jetzt tuts, Danke.
Gruss, Max
-
Hallo, Max-L. v. Schaper!
so, noch schnell ein kürzeres beispiel:
<script type="text/javascript">
var x=231;
var runter = true;
function Init() {
if(x<100){runter=false;}
if(x>255){runter=true;}
if(runter){
x-=10;
}
else{
x+=10;
}
document.getElementById("obj").style.backgroundColor = "rgb("+x+",0,0)";
}
</script>
<body onLoad="window.setInterval('Init()',100)">
<span id="obj"> [Text] </span>
</body>freundl. Grüsse aus Berlin, Raik
--
die Schläge, die Du bereitwillig hinnimmst, werden Dir eine größere Hilfe im Leben sein, als die, die Du für ungerechtfertigt ablehnst; denn einestages wirst auch Du die Fürsorge und Hilfe darin erkennen.
(c)XaraX http://forum.de.selfhtml.org/archiv/2004/4/77523/#m447546-
Hi,
var runter = true;
function Init() {
if(x<100){runter=false;}
if(x>255){runter=true;}
if(runter){
x-=10;
}
else{
x+=10;
}das geht noch kürzer!
var step = -10;
function Init() {
if(x<100){ step = 10; }
if(x>255){ step = -10; }
x += step;
document.getElementById("obj").style.backgroundColor = "rgb("+x+",0,0)";
};-)
cu,
Andreas--
MudGuard? Siehe http://www.Mud-Guard.de/
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
-
-
-
Hallo, Max!
nur mal als kleines beispiel zur anschauung, wie man sinnvollerweise solchen code strukturiert:
function Init(x) {
var p;
if (x>100){
p = x-10;
document.getElementById("Hea1").style.color = "rgb("+p+",0,0)";
window.setTimeout("Init(p)",500);
};^
das gehört da nicht hin.if (x<100) {
Init2(x);
};^
}
function Init2(x) {
var p;
if (x<250) {
p = x+10;
document.getElementById("Hea1").style.color = "rgb("+p+",0,0)";
window.setTimeout("Init2('p')",500);
};^
if (x>250) {
Init(x);
};^
}
und anstatt 2 if-abfragen zu machen ist es sinnvoller,
eine bedingung zu prüfen und in _allen_ anderen fällen mit einem else-zweig zu reagieren:var p;
function Init(x) {
if (x>100){
p = x-10;
document.getElementById("Hea1").style.color = "rgb("+p+",0,0)";
window.setTimeout("Init(p)",500);
}
else {
Init2(x);
}
}es wäre auch nett, wenn du den funktionierenden code hier nochmal posten würdest, damit andere daraus was lernen können, wenn sie ihn im archiv finden.
freundl. Grüsse aus Berlin, Raik
--
die Schläge, die Du bereitwillig hinnimmst, werden Dir eine größere Hilfe im Leben sein, als die, die Du für ungerechtfertigt ablehnst; denn einestages wirst auch Du die Fürsorge und Hilfe darin erkennen.
(c)XaraX http://forum.de.selfhtml.org/archiv/2004/4/77523/#m447546
-
-
-
Hallo Max,
die Variable p ist innerhalb der Funktionen Init1/2 deklariert, also eine lokale Variable. Wenn die Funktionen dann über setTimeout aufgerufen werden, gibt es die lokale Variable p nicht mehr, da ja Init1/2 schon beendet ist. Deklariere p einfach außerhalb der Funktionen, p ist dann eine globale variable und in allen Funktionen bekannt.
Gruß, Jürgen
-
Hllo Juergen,
Es klappt!
Endlich, es klappt!
Vielen Dank an euch alle, fuer die Hilfe ! ! !
Gruss, Max
-
-
-