[JavaScript] Objekte zerstören/erzeugen

[tedlemegba]

Neues Problem, siehe weiter unten. [#9]

Alter Titel zum alten Problem: *erledigt* [JavaScript] Objekt verschieben klappt nicht


Hallo zusammen!

Ich habe mich gerade aus enormer Langeweile an JavaScript herangewagt und bin auch sofort gescheitert. Allerdings wundert es mich, wieso es nicht klappt...

Wie im Titel beschrieben will ich gerne eine Objekt verschieben - in meinem Fall ist das im Moment ganz einfach mal ein Bild. Über eine id kann das Bild auch eindeutig identifiziert und angesprochen werde. Jetzt will ich dessen Lage (style.top, style.left) ändern. Ich habe festgestellt, dass das Bild dazu am Anfang wohl schon mal diese festgelegten Attribute benötigt; bspw.

style="position:absolute; left:310px; top:110px;"​

Dann kann ich hergehen und z.B. sagen:

document.getElementById('foobar').style.top = 70;​

Klappt soweit auch wunderbar. Damit habe ich allerdings natürlich nur festgelegt, wo das Bild jetzt sein soll. Wenn ich die Lage aber abhängig von der vorherigen Lage verändern will (sprich: 70 Pixel weiter runter, 20 Pixel weiter rechts) scheitere ich.

document.getElementById('foobar').style.top += 70;​

will einfach nicht funktionieren, obwohl es in meinen Augen korrekt scheint.

document.getElementById('foobar').style.top =
document.getElementById('foobar').style.top + 70;​

tut leider auch nicht (wäre imo auch viel umständlicher). Hab's auch schon versucht über eine Variable auszulagern. Aber scheinbar liegt der Fehler ja irgendwo anders.

Hat jemand einen Tipp für mich? Wäre ich sehr dankbar!

 

[BFabian]

JavaScript ist manchmal echt leidig :

elem = document.getEle....
top = parseInt(elem.style.top);
elem.style.top = top + irgendwas;

 

[tleilax]

Um das noch eben zu ergänzen:

Die Angaben werden im DOM-Baum inklusive Suffix "px" gespeichert, wodurch das Addieren nunmal nicht geklappt. Deshalb muss der Zahlenteil erst rausgeparst werden...

 

[tedlemegba]

Aaaaaaaah.. ja dann. Super danke euch beiden.
Ist es also richtig zu sagen, dass es am Datentyp liegt?
Ich habe praktisch vorher einen String (weil das px mit dranhängt) und muss erst konvertieren bzw. den Zahlenwert extrahieren?

Wäre es dann im Prinzip so erst vollkommen korrekt?

elem = document.getElementById('foobar');
top = parseInt(elem.style.top);
elem.style.top = top + 10 + "px";​

 

[tleilax]

Prinzipiell richtig, aber Du solltest die Addition noch klammern, sonst könnte es unter Umständen zu Fehlern führen.

elem.style.top = (top + 10) + "px";

 

[tedlemegba]

Prinzipiell richtig, aber Du solltest die Addition noch klammern, sonst könnte es unter Umständen zu Fehlern führen.

elem.style.top = (top + 10) + "px";

Okay. Noch eine weitere Frage... es sollte sich ja wieder um einen String handeln (oder gibt es bei Derartigem einen eigenen Datentyp?).. öhm okay Frage hat sich soeben erledigt. Wollte eigentlich Fragen, ob das 10 in " kommt, aber dann wäre das Addieren ja totaler Quark gewesen. Irgend eine Rückkonvertierung ist aber nicht nötig, oder? Kann man von korrektem Code sprechen?

Dankö.

 

[tleilax]

Die Konvertierung passiert schon durch das Anhängen vom String "px". Falls Du nur 'nen Int übergeben würdest, dürfte jede Engine wohl davon ausgehen, dass Du Pixel meinst und würde den Code demzufolge also auch noch korrekt umsetzen.

 

[tedlemegba]

Wunderbar. Danke für die Antworten.

 

[tedlemegba]

Okay. Dann habe ich doch noch mal ein neues Probem.. bzw. neue Fragen. Die sind genauso wie die oberen wohl ziemlich noobig, aber dafür ist das Forum ja unter anderem da.

Und zwar würde ich gerne meine Objekte zerstören und erzeugen, wenn das geht. Sprich bei einer bestimmten Aktion entsteht ein neues Objekt (nehmen wir als Beispiel einen div-Container oder ein Bild, weil das wohl auch praxisnah ist hoffe ich - zumindest bei meiner Anwendung mit der ich experimentieren will) - das soll per Klick (oder sonstiges Event) wieder zerstört werden. Krieg ich das Objekt komplett wieder raus? Oder kann ich es nur via style.visibility=hidden|collapse "verstecken"? Und wie erzeuge ich einfach so mal ein neues Objekt (nehmen wir der Einfachheit halber auch einfach mal per Klick an; kann ja alles schön in eine Funktion ausgelagert werden)?

Und wie kann ich das Ganze dynamisch gestalten (sprich es wird wohl AJAX von dem ich eigentlich auch noch keine Ahnung hab)? Heißt auf gut deutsch: ich klicke auf einen Button, dann entsteht ein neues Objekt (nehmen wir mal an ein Bild, dessen URL ich per AJAX kriege).. gleichzeitig soll ein altes Objekt zerstört werden (oder unsichtbar, wenn's anders nicht geht). Geht das? Ich denke ja.

Ich gehe jetzt mal eben davon aus, dass es nicht möglich ist, ein Objekt zu zerstören.. würde es dann (vielleicht für den Browser?) ein Problem darstellen eine größere Zahl unsichtbarer/versteckter Objekte zu haben (wird also beispielsweise sehr langsam mit der Zeit)?

Danke nochmals.

Hat am Rande vielleicht jemand einen Tipp für ein gutes AJAX-Buch oder -Tutorial? Wenn ich nachher Lust und Zeit habe were ich vielleicht die Boardsuche mal anstupsen.


Edit: ist mein Vorhaben abhängig von Eigenschaften oder Methoden des jeweiligen Objekttypes?
Ginge das Erzeugen eventuell über document.write? Wäre aber arg hässlich, oder?

 

[tleilax]

Das Erzeugen und Zerstören geht durchaus. Guck Dir mal bei SelfHTML document.createElement()/~.appendChild()/~.removeChild() an. Ist aber definitiv nicht trivial und ich würde Dir evtl dazu raten, ein Framework dafür zu verwenden, da einem dort vieles abgenommen werden kann und man sich nicht um Crossbroswerfunktionalität kümmern muss.

Prototype - speziell interessant der DOM-Builder
JQuery

Kannst Dir die beiden Frameworks ja mal angucken. Vielleicht ist ja eines von beiden was für Dich.

Prototype hab ich schon wesentlich öfter benutzt und das erleichtert einem das Arbeiten oftmals ungemein. Auch AJAX-Sachen sind damit eine Menge einfacher.

 

[tedlemegba]

Aaah ja.. schon mal wieder super hilfreich! Doch wenn man so vor sich hinbastelt stößt man wohl oder übel vor neue Hindernisse.

Ich hab mir die Seitenstücke von selfHTML mal zu Herzen genommen und dann mein eigenes Beispiel konstruiert/zusammengebastelt:

<html>
<body>
<div id="bereich" style="border:1px black solid; padding:10px">
  <img src="https://127.0.0.1/myll/time.php?time=1">
  <img src="https://127.0.0.1/myll/time.php?time=2">
  <img src="https://127.0.0.1/myll/time.php?time=3">
</div>
<script type="text/javascript">
function move() {

  var knoten = document.getElementById("bereich").firstChild;
  verschwunden = document.getElementById("bereich").removeChild(knoten);

  var img = document.createElement("img");
  img.src = "https://127.0.0.1/myll/time.php?time="+Math.random();*

  var Ausgabebereich = document.getElementById("bereich");
  Ausgabebereich.appendChild(img);

}
</script>
<a href="#" onClick="move()"><img src="move.gif" border="0"></a>
</body>
</html>

Ich habe einen DIV-Container (bereich). In diesem befinden sich am Anfang 3 Bilder (time.php gibt mir via GDLib in PHP einfach ein Bild mit der aktuellen Uhrzeit + Zufallsstring in einer zufälligen Farbe aus**:

).
Per Klick auf das move-Bild soll jetzt das vorderste (erste) Bild entfernt werden und dafür ganz hinten ein neues Bild angehängt werden. Das soll in der Funktion move() geschehen.
Soweit schön und gut. Leider klappt das nicht perfekt und ich weiß nicht warum (sondern habe nur eine Vorahnung).

Es sieht in der Realität nämlich folgendermaßen aus:
Zu Beginn 3 Bilder, Klick auf Move, 4 Bilder, Klick, 4 Bilder, Klick, 5 Bilder, Klick, 5 Bilder, Klick, 6 Bilder, Klick, 6 Bilder, Klick, 7 Bilder -- "stabilisiert" sich schließlich bei 7 Bildern.
Sehr verwunderlich auch, da es bei mir vorhin mal nur 5 Stück waren. Jetzt sieht das aber immer so aus und stellt sich dann bei 7 Bildern ein.

Nun.. woran kann das liegen? Irgendwie wird das child vielleicht nicht richtig erfasst? Oder ist es "nicht vorhanden"?

Kann es auch etwas mit der Position des JavaScript-Codes in der HTML-Umgebung zu tun haben?

Ich bin ehrlich gesagt wieder vollkommen ratlos.


* (Code Zeile 15) +Math.random() dient nur dazu, den Browser-Cache zu umgehen; die Bilder wären dann nicht unterscheidbar und hat sonst keine Funktionalität oder Bezug zur späteren Anwendung.
** Das hat nichts mit meiner späteren Anwendung zu tun, dient aber der Unterscheidbarkeit einzelner Bilder.

Ach ja: für dieses Stück Code habe ich mal noch nicht mit einem Framework gebastelt, wollte die Technik erstmal nahe begreifen -- und wahrscheinlich wäre das dann in diesem Beispiel zu viel des Guten.

Danke im Voraus!

 

[Moloc]

Deine Frage ist zwar schon 2 Tage alt, aber vielleicht kannst es noch gebrauchen
Das Problem, dass du auf einmal mehr Bilder hast, liegt daran, dass zwischen den Bildern ein Text-Objekt eingefügt wird. (Im Quellcode steht da ja nen Enter, Tabulatoren oder Leerzeichen.) Somit löscht du ein Text-Objekt, und fügst ein Bildobjekt hinzu. Das zweite mal ist dann das Bild-Objekt an der ersten Position und du löscht das Bild, usw...

(Auf selfhtml haben sie direkt mit tagnamen gearbeitet und mit deren index dazu. Deshalb tritt dort dieser Fehler nicht auf).

D.h. Entweder im Quellcode alles aneinander reihen oder die Text-Objekte einfach löschen bis ein Bild-Objekt kommt.