aktion nach bestimmter Zeit

[littleHtml Freak]

hallo,

wie ich ja schon in einem vorherigen thema erwähnt habe gerade vor snake zu programmieren komme aber bei einer weiteren stelle nicht weiter :/
ich scheitere gerade an zehlreichen versuchen eine aktion nach einer bestimmten zeit durchzuführen :/ mein code sieht so aus:

 var x = 0;
             var y = 0;
             var id = 0;
             var i = 0;
             var vorher;
             while(x < 400 && y < 400){
                      vorher = getms() + 1;
                     jetzt = getms();
                     
                      if(jetzt = vorher){
                                  document.write("<div class='glied' id='"+id+"'; style='position: absolute; left:"+x+"px; top: "+y+"px;'> </div>");
                                x = x+10;
                                y = y+10;
                                 id ++;
                     }
                     
                     
             }

function getms(){ 
         var d = new Date();
         var ms = d.getSeconds();
         return ms;
}

das soll passieren: jede sekunde soll ein neues element(doc.write) erstellt werden
(das ganze ist im moment noch hardcoded; also nicht wundern es hat noch nicht viel mit snake zu tun ;) )

soweit ich das problem eindämmen konnte liegt es zwischen "jetzt = getms();" und "if(jetzt = vorher)"... ich habe mir mit alert die zahlen ausgeben lassen und vor der bedingnun sind sie unterschiedlich und danach zuschnell gleich :/
viele grüße simon

 

[Arcsinh]

SELFHTML: JavaScript / Objektreferenz / window
SELFHTML: JavaScript / Objektreferenz / window

 

[struppi]

und vergiss document.write(), wenn du das ausführst, nachdem die Seite geladen wurde, wird der komplette Inhalt inkl. des Skripts überschreiben, ist also für dein Problem nicht nutzbar.

Dein Ansatz für eine Animation mit JS, funktioniert so nicht. Es gibt aber Millionen Beispiele im Netz die den richtigen Weg zeigen.

Ein Vergleich in JS (und vielen anderen Sprachen) geht so if(a == b) oder besser if(a===b)

 

[littleHtml Freak]

vielen dank
ich werde wohl setInterval benutzen aber warum geht das nicht mir doc.write????
ich habe es mit alert probiert (alle 5s ein alert) und es geht wunderbar
wenn ich dann aber meine funktion "gliederstellen", die sonst funktioniert, einsetzte geht es nicht mehr :/ der browser wartet bis er gliederstellen zum ersten Mal aufrufen soll und stellt dann nurnoch einen weißen bildschrim dar und läd ewig :/

interval = window.setInterval("gliederstellen(x,y,id)", 5000);

function gliederstellen(x,y,id) {
         document.write("<div class='glied' id='"+id+"'; style='position: absolute; left:"+x+"px; top: "+y+"px;'> </div>");
}

viele grüße simon

EDIT: oh danke, das mit dem vergleich war dumm von mir :/ aber zum doc.write: vorher wurde der ganze inhalt nicht überschrieben?? da wurden meine schwarzen kästchen schön dargestellt wie es sollte... allerdings erklärt das natürlch wieso er ewig läd (kann die variablen ja nicht finden wenn der ganze code überschrieben ist)
ich befürchte ich werd das wohl doch mit ner tabelle machen müssen :/
trotzdem erstmal vielen dank!

 

[struppi]

Alert() wartetet auf deine Eingabe, damit kannst du hier nicht debuggen. document.write() geht nicht, weil es so ist wie ich es dir gerade erklärt habe. Damit wird das document überschrieben. Und das ist genau das was du siehst, das ewig laden kommt daher, weil document.close() fehlt.

 

[littleHtml Freak]

ok... wann wird denn von doc.write alles überschirben und wann nicht? weil wenn ich sowas hier mache: (mein neuer ansatz für snake)

function tabelleerstellen() {
         var r = 1, i = 1;
         document.write("<table>");
             while(r <= 20){
                      i = 1;
                      document.write("<tr id='"+r+"'>");
                     while(i <= 20){
                                          document.write("<td id='"+i+r+"'> </td>")
                                         i++;
                     }
                     document.write("</tr>")
                     r++;
             }
             document.write("</table>");
}

wird nicht das ganze dokument überschrieben sondern einfach an die stelle wo ich die funktion aufrufe die tabelle geschrieben.

 

[Arcsinh]

Du solltest document.write ganz aus deinem Kopf verbannen.
Besonders in Sachen Tabellen gibt es elegantere Lösungen, z.B. insertRow und insertCell.

 

[struppi]

ok... wann wird denn von doc.write alles überschirben und wann nicht?

sagte ich bereits. nachdem das Dokument geladen wurde, überschreibt document.write() alles.

 

[littleHtml Freak]

ah danke
mit create Element sollte es doch aber gehn oder?
SELFHTML: JavaScript / Objektreferenz / document

 

[struppi]

oder mit innerHTML, createElement() ist aber oft die bessere Wahl. Und wenn es um Tabellen geht, gibt es noch insertRow und insertCell
https://developer.mozilla.org/en/DOM/table.insertRow
https://developer.mozilla.org/en/DOM/tableRow.insertCell

 

[littleHtml Freak]

ja ich habe mir heute überlegt, dass ich ja mit createElement das slebe machen kann, was ich mit doc.write versucht habe. ich habe dafür außerdem auch schon eine funktionierende funktion geschrieben die die erzeugten punkte wieder löscht.
nur eins funktioniert leider noch nicht: das hinzufügen von ein paar attributen

function hinzufuegen(id,x,y){
//TAG     
         var p = document.createElement("p");
         var ausgabeort = document.getElementById("spielfeld");
         ausgabeort.appendChild(p);
//ID
         var name = document.createAttribute("id");
         name.nodeValue = id;
         var element = document.getElementsByTagName("p")[0];
         element.setAttributeNode(name);
//CLASS
         var klasse = document.createAttribute("class");
         klasse.nodeValue = "punkt";
         var element2 = document.getElementsByTagName("p")[0];
         element2.setAttributeNode(klasse);
//POSITION 
         var position = document.createAttribute("position");
         position.nodeValue = "absolute";
         var element3 = document.getElementsByTagName("p")[0];
         element3.setAttributeNode(position);
//LEFT
         var links = document.createAttribute("left");
         links.nodeValue = x;
         var element4 = document.getElementsByTagName("p")[0];
         element4.setAttributeNode(links);
//TOP
         var rechts = document.createAttribute("top");
         rechts.nodeValue = y;
         var element5 = document.getElementsByTagName("p")[0];
         element5.setAttributeNode(rechts);
}

das erstellen und das zuweisen von class und id klappt hervorragend, wenn ich den rest weglasse. Aber wenn ich position, left und right hinzufüge geht es nichtr! die position ist wie vorher ohne position! ich aknn den fehler nicht finden oder kann ich nur eine maximale anzahl von attributen hinzufügen?

EDIT: id geht auch nicht :/

 

[littleHtml Freak]

ich mach das mal in nen neues thema.. ist inzwischen nen bissl vom thema abgedriftet und das eigendliche problem ist gelöst ;)