JavaScript Variable in HTML schreiben und regelmäßig aktualiert anzeigen

[the-unknown]

Hallo, ich ma wieder ^^

Ich habe hier ein Script (video.js) wobei ich den Player Controler selbst ansteuern wll.

Play und Pause kein Problem, aber er soll natürlich auch die Zeit anzeigen. Bisher bin ich soweit, dass er das macht, aber die aktuelle Zeit immer hinten dran hängt, und nicht aktualisiert. Und ich habe keinen Plan mehr. Habe gegooglet, viel ausprobiert, aber irgendwo muss noch ein fehler sein.

Evtl habt ihr ja eine Idee.

Hier mal der Code:

				var zeitupdate = function(){
  					var myPlayer = this;
  					// Do something when the event is fired
					var whereYouAt = document.createTextNode(myPlayer.currentTime());
					var trenner = document.createTextNode("  /  ");
					var howLongIsThis = document.createTextNode(myPlayer.duration());
					
					document.getElementById("zeit").appendChild(whereYouAt);
					document.getElementById("zeit").appendChild(trenner);
					document.getElementById("zeit").appendChild(howLongIsThis);
					
					document.getElementsById("zeit").removeChild(whereYouAt);
					document.getElementsById("zeit").removeChild(trenner);
					document.getElementsById("zeit").removeChild(howLongIsThis);
					
					//function löschen(zeit) {
					//document.getElementById("zeit").innerHTML = "";
					//}					
					
					//document.getElementById("zeit").innerHTML=whereYouAt;
					//document.getElementById("zeit").innerHTML=trenner;
					//document.getElementById("zeit").innerHTML=howLongIsThis;

				};
				
				myPlayer.on("timeupdate", zeitupdate);

RemoveChild und die beiden, die ich auskommentiert habe, waren meine Ideen zur Probemlösung.

Danke schon im voraus.

 

[marcOcram]

getElementById bitte ohne "s", da ID's eindeutig sein sollten, außerdem gibt es den Befehl mit "s" nicht, sodass es auch nur hinten dran gehängt wird. (Zeile 12-14)

 

[Jesterfox]

Der untere auskommentierte Teil sieht doch eigentlich schon fast gut aus... lass mich raten: der ist auskommentiert weil nicht der vollständige Text nagezeigt wurde sondern nur die Gesamtzeit?

document.getElementById("zeit").innerHTML+=whereYouAt;
document.getElementById("zeit").innerHTML+=trenner;
document.getElementById("zeit").innerHTML+=howLongIsThis;

und es sollte gehen.



PS: die Variablen die verwendet werden müssen dann natürlich direkt Stings und keine Textknoten sein, ist mir grad noch dazu aufgefallen.

 

[the-unknown]

jetzt bin ich verwirrt. zumindest ein kleines bisschen

habe jetzt zeilen 8 bis 10 durch

    var whereYouAt = document.createTextNode(myPlayer.currentTime());
    var trenner = document.createTextNode(" / ");
    var howLongIsThis = document.createTextNode(myPlayer.duration());

ersetzt.

allerdings wird jetzt immer noch alles untereinander gesetzt, znd nicht der alte wert durch den neuen ersetzt

Das "s" bei Elements ist auch weg.

lass mich raten: der ist auskommentiert weil nicht der vollständige Text nagezeigt wurde sondern nur die Gesamtzeit?

eigendlich nicht. dass das passiert fällt mir erst auf, nachdem ich es jetzt gelesen habe. die zählung, so blde ich mir ein, lief schon mal

 

[Jesterfox]

Äm, nein falsch... kein CreateTextNode.

var whereYouAt = myPlayer.currentTime(); 
var trenner = " / ";   
var howLongIsThis = myPlayer.duration();

var zeit = document.getElementById("zeit"); 

zeit.innerHTML = "";

zeit.innerHTML+=whereYouAt;
zeit.innerHTML+=trenner;
zeit.innerHTML+=howLongIsThis;

Die AppendChild und RemoveChild Teile entfallen dann auch komplett. InnerHTML ist bei reinem Text wesentlich einfacher in der Handhabung als diese Knoten-Geschichte. (Theoretisch könnte man sich die 3 oberen Variablenzuweisungen noch sparen und das direkt in die unteren Anweisungen mit einbauen.)

 

[the-unknown]

supi, danke. schaue mir das dann noch mal in ruhe an um alles zu verstehen