thema wehseln mit getElemantById

R

rotmilan

Mitglied
hallo Leute,

ich bin noch neu bei javascript.

Ich möchte gerne ein thema anzeigen welches sich nach einer bestimmten Zeit wechselt.

vermutlich kann ich das mit getElementbyid und setTimeout machen ich weiss blos nicht genau wie.

könntet ihr mir bitte ein paar tipps geben.

mit freundlichen Grüßen rotmilan
 
Hi,

z.B. so:
HTML: 
<script language="JavaScript" type="text/javascript">
var current = 1;
var amount = 5;

function nextOne() {
	document.getElementById("content" + current).style.display = "none";
	current ++;
	if (current > amount) current = 1;
	document.getElementById("content" + current).style.display = "block";
	setTimeout('nextOne()', 2000);
}

</script>
<body onLoad="setTimeout('nextOne()', 2000)">
<div id="content1" style="display:block; width:320px; height:240px">Hier ist das erste Kapitel</div>
<div id="content2" style="display:none; width:320px; height:240px">Hier ist das zweite Kapitel</div>
<div id="content3" style="display:none; width:320px; height:240px">Hier ist das dritte Kapitel</div>
<div id="content4" style="display:none; width:320px; height:240px">Hier ist das vierte Kapitel</div>
<div id="content5" style="display:none; width:320px; height:240px">Hier ist das fünfte Kapitel</div>
</body>

Gruß
.
 
Schönen dank ,

dar hilft mir schon weiter.

Nur hätte ich gerne für jedes Kapitel eine eigene Zeit festgelegt die ich später noch über eine Seite verändern möchte.
Kannst du mir vielleicht noch sagen wie ich das machen kann?

mit freundlichen Grüßen

rotmian
 
hallo

bei meinem Versuch den Vorschlag abzuändern bleibt er beim zweiten Thema stehen.
Kann ich überhaupt die Zeitangabe in eine variable stecken?

HTML: 
function time(gets){
setTimeOut('nextOne()','gets');
}	

var current = 1;
var amount = 5;

function nextOne() {
	document.getElementById("content" + current).style.display = "none";
	current ++;
	document.getElementById("content" + current).style.display = "block";
	if(current == 2){
	time(2000);}
	if(current == 3){
	time(2000);}
	if(current == 4){
	time(5000);}
	if(current == 5){
	time(2000);}

}
 
setTimeOut('nextOne()','gets');
Zum Vergrößern anklicken....
So versuchst Du, der Funktion setTimeout die Zeichenkette "gets" zu übergeben. Versuchs mal so:
HTML: 
function time(gets){
    setTimeout('nextOne()',gets);
}
Ausserdem wird das "o" in setTimeout klein geschrieben und ich bin mir nicht sicher, ob "time" in JavaScript ein reserviertes Wort ist, aber das wirst Du ja feststellen. ;)

Gruß
.
 
Yo,

das o war ausschlaggebend. Der übergebende String war noch so vom knobbeln, das hatte ich mir eigentlich auch nicht so vorgestellt.

Als nächstes würd ich gern über ein input feld die Zeitangaben ändern.
Müsste ich da für jedes Kapitel eine eigene Function schreiben die die Zeit steuert?
Und kann ich die Functionsparameter referenzieren oder sind die global?

mit freundlichen Grüßen

falke

P.s deine Website ist wirklich cool
 
Hi,

mach doch einfach ein Array (bzw. 2 Arrays), in dem Du die Zeiten speicherst. Die Werte in dem Array kannst Du ja per JavaScript dynamisch ändern. Das sähe dann z.B. so aus:
HTML: 
var zeiten = new Array(0, 2000, 1000, 5000, 8000, 3000);

function nextOne() {
	document.getElementById("content" + current).style.display = "none";
	current ++;
	if (current > amount) current = 1;
	document.getElementById("content" + current).style.display = "block";
	setTimeout('nextOne()', zeiten[current]);
}

Gruß
.
 
ja das ist schon kürzer und ich hab für jedes Kapitel ein Teil im Array.

nur bleibt es nicht bei der letzten Aussage stehen.

Jetzt brauch ich die Möglichkeit von einer anderen Seite oder von einem anderen Kapitel das Array zeiten zu bearbeiten.

Mein Versuch, aber ich krieg eine Fehlermeldung der Link ist wahrscheinlich so nicht richtig.

HTML: 
<div id="content6" style="display:none; width:320px; height:240px">Der Test ist beendet</div>
<div id="admin" style="display:none; width:320px; height:240px">Adminbereich:<form action="tutorials.htm" method="GET">
<input type="text" name="zeiten[1]" size="5"><input type="submit" value="speichern"></form></div>

<a href="javascipt:id='admin'">Admin</a>  // Hier bin ich mir nicht sicher



mfg rotmialan
 
Ich muss zugeben, ich verstehe nicht so recht, wass Du meinst: Warum willst Du mit einem Link die Variable "id" auf "admin" setzen (wobei ich id wegen als Schlüsselwort nicht benutzen würde)? Wo startest Du die "Slideshow"? Da Du Deine DIVs nicht fortlaufent benannt hast; hast Du auch ein zweites Array mit den IDs der DIVs? Sag mir bitte noch einmal genau, was passieren soll, dann kann ich vielleicht eine Lösung posten.

Gruß
.
 
hallo,

also das soll so ablaufen.

1.soll beim Laden ein Formular erscheinen welches zur Benutzerregistrierung dient nach erfolgreichen speichern erscheint eine kurze Nachricht und ein button welches zum Start des tests dient.
2.die show ist ein test wo man bevor die Zeit abläuft auch die möglichkeit haben soll zu speichern. Falls die Zeit abläuft soll automatisch gespeichert werden.
3.der link auf die id admin soll ein block aufrufen wo der admin die möglichkeit hat die Zeit für jedes Kapitel zu ändern und ggf. die Aufgaben für den jeweiligen Bereich ändern kann.

mfg falke
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück