nicht angemeldet
der punkt soll sich bewegen O_O
Mein Ziel ist es einen Punkt dynamisch bewegen zu lassen.
In diesem Fall von links nach rechts über 10 Pixel.
Das hab ich mir überlegt als kleines Einstiegsprogramm in die welt von DHTML. Nunja in jedem Fall stoße ich auf Probleme die ich nicht Lösen kann.
Ich weis im prinzip wo der Fehler leigt. Ich kann ihn nur nicht beheben.
Aus diesem Forum hab ich entnommen, das das mehrmalige benutzen von
document.write den Code für den Browser überschriebt, so das er nichts damit anfangen kann. Nur weis ich nicht wie ich dieses document.write übergehen kann.
Was für Lösungen gibt es zu dem Problem?
So weit komme ich:
für Tipps oder ansätze zur Lösung wäre ich sehr dankbar.
<HTML>
<HEAD>
<script type="text/javascript">
<!--
var x=200; //x und y Koordinate relativ zur Standartposition des Punktes
var y=15;
function move()
{
if (x < 210){
// isse klar oder?
document.write("<style type='text/css'>#Punkt{position:absolute;top:"+y+"px;left:"+x+"px;}</STYLE>");
// erhöhung der x Koordinate um 1 Pixel
x++;
// rekursive if schleife mit Zeitverzögerung
setTimeout(move(),50);
}
}
//-->
</script>
</HEAD>
<BODY>
<SCRIPT>
move(); //Funktion aufrufen
</script>
<div id="punkt" style="font-size:60;" >.</div>
</BODY>
</HTML>
Grüße!
-
Hallo, Robert!
document.write("<style type='text/css'>#Punkt{position:absolute;top:"+y+"px;left:"+x+"px;}</STYLE>");
2. ja, damit überschreibst du den inhalt des gesamten dokumentes.
ausserdem würde, _wenn_ das gehen würde, immer wieder ein neuer punkt eingefügt werden.
ausweg:
http://selfhtml.teamone.de/javascript/objekte/document.htm#get_element_by_id
und
http://selfhtml.teamone.de/javascript/objekte/style.htm#set_attribute<SCRIPT>
move(); //Funktion aufrufen
</script>1. der scriptaufruf erfolgt, bevor der div. im dokument existiert.
ausweg: http://selfhtml.teamone.de/javascript/sprache/eventhandler.htm#onload<div id="punkt" style="font-size:60;" >.</div>
schaus es dir mal an. wenn du dann noch fragen hast, melde dich nochmal. ;-)
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
function move()
{
if (x < 210){
// isse klar oder?
document.write("<style type='text/css'>#Punkt{position:absolute;top:"+y+"px;left:"+x+"px;}</STYLE>");// erhöhung der x Koordinate um 1 Pixel
x++;// rekursive if schleife mit Zeitverzögerung
setTimeout(move(),50);
}Du musst das ganze ohne document.write lösen, den Link dazu hast du ja schon bekommen.
Trotzdme möchte ich dir ein paar Fehler aufzeigen, damit du auch etwas dabei lernst ;-)document.write("<style type='text/css'>#Punkt{position:absolute;top:"+y+"px;left:"+x+"px;}</STYLE>");
1. Wie schon erwähnt, bei dir würde bei jedem Funktionsaufruf ein neuer Punkt gezeichnet werden --> schlecht
2. Bei dir würde beim ersten Funktionsdurchlauf garnichts passieren, weil die Inkrementierung des x erst nach dem document.write steht (wenn das funktionieren würde, das x++ besser vorher schreiben.
3. Anstatt rekursiver Programmieren, hätte hier ein einfaches while oder for gereicht!
// rekursive if schleife mit Zeitverzögerung
4. if ist KEINE Schleife, if nennt man Bedingung oder Verzweigung. Schleife ist etwas, dass sich bei entsprechenden Bedingungen mehrmals wiederhohlt.
Mit freundlichen Grüsse,
beinaendi--
Man weiss nicht, ob es besser wird, wenn es anders wird, aber es muss anders werden, um besser werden zu können-
Hi,
document.write("<style type='text/css'>#Punkt{position:absolute;top:"+y+"px;left:"+x+"px;}</STYLE>");
- Wie schon erwähnt, bei dir würde bei jedem Funktionsaufruf ein neuer Punkt gezeichnet werden --> schlecht
Das glaub ich nicht, daß hier jedesmal ein Punkt gezeichnet werden würde.
Hier wird nur STYLE geschrieben !- Anstatt rekursiver Programmieren, hätte hier ein einfaches while oder for gereicht!
Dann würde aber der Punkt so schnell rüberspringen wie das Script abgearbeitet werden kann, ohne Zeitverzögerung.
Also wäre weder 'while' noch 'for' angebracht, sondern ein 'setInterval()'.Im Prinzip find ich das schonmal gar nicht so schlecht, was Robert da gemacht hat.
Das mit der rekursiven Funktion sollte eigentlich auch funktionieren, so wies angelegt ist.
Nur läßt sich mit 'document.write()' nicht einfach was im Dokument umschreiben.
Der richtige Weg ist der Zugriff auf die Style-Eigenschaft des Elementes(Punkt) per DOM und die Änderung derselben :http://selfhtml.teamone.de/javascript/objekte/style.htm
Wie schon richtig bemerkt muß dann aber der Funktionsaufruf erfolgen, nachdem das Element bereits existiert.
gruß
ptr-
Hi !
PS: da fehlt was:
setTimeout(move(),50);
^^^^^^
setTimeout('move()',50);gruß
ptr
-
-
Hallo Robert,
Ich habe sowas mal gebastelt. Kuck mal hier:
http://dhtml.andreas-lindig.deUnter dem Menüpunk "Animation" findest Du Beispiele mit bewegten Elementen.
Gruß, Andreas
--
<img src="http://was-ist-das.andreas-lindig.de/was_ist_das_fetzen.jpg" border="0" alt="">
http://was-ist-das.andreas-lindig.de