2 Inhalte auf einer Seite ausblenden und gleichzeitig wieder einblenden

Question

Ich würde gerne 2 Inhalte auf einer Seite ausblenden und nach 5 Sekunden gleichzeitig wieder einblenden. Mein code sieht wie folgt aus:

<script type="text/javascript">
<!--
 
// Funktion zum Einblenden der Knöpfe
function showContent() {
  var content = document.getElementById("IN08_qst", "timer");
  // Den normalen Anzeigemodus wiederherstellen
  content.style.display = "";
}
 
// Nach dem Laden der Fragebogen-Seite das Script starten
SoSciTools.attachEvent(window, "load",
  function() {
    // Objekt heraussuchen
    var content = document.getElementById("IN08_qst", "timer");
    // Ausblenden
    content.style.display = "none";
    // Den Timer starten
    window.setTimeout(showContent, 5000); // Nach 1 Min = 60.000 ms
  }
);
 
// -->
</script>

Allerdings wird nur das erste Element (IN08_qst) ausgeblendet u. dann wieder eingeblendet, beim timer klappt das nicht (obwohl das Element auf der Seite zw. <div id="timer"> und </div> steht. Zwei separate codes wie oben (einen für "IN08_qst" und einen 2. für "timer") haben leider auch nicht funktioniert. Wo liegt der Fehler?

Answer 1

Sie haben den JavaScript-Code vermutlich zweimal eingebunden?

Binden Sie ihn nur einmal ein und verdoppeln Sie einfach die Zeilen, in denen die Kennung "IN08_qst" steht (dabei ersetzen Sie sie natürlich durch die Kennung der zweiten Frage).

Warum es so nicht klappt? Weil Sie mit der zweiten Definition der Funktion showContent() die erste überschreiben. Diese wird dann nicht mehr aufgerufen.

Comments

Ja genau. Ich habe die Zeile jetzt verdoppelt und entsprechend angepasst:
<script type="text/javascript">
<!--
 
// Funktion zum Einblenden der Knöpfe
function showContent() {
  var content = document.getElementById("timer");
var content = document.getElementById("IN08_qst");
  // Den normalen Anzeigemodus wiederherstellen
  content.style.display = "";
}
 
// Nach dem Laden der Fragebogen-Seite das Script starten
SoSciTools.attachEvent(window, "load",
  function() {
    // Objekt heraussuchen
    var content = document.getElementById("timer");
var content = document.getElementById("IN08_qst");
    // Ausblenden
    content.style.display = "none";
    // Den Timer starten
    window.setTimeout(showContent, 5000); // Nach 1 Min = 60.000 ms
  }
);
 
// -->
</script>

Leider scheint es sich noch immer zu überschreiben - je nach dem welche der beiden Zeilen ich zuerst in den code gebe klappt das entweder mit der Frage oder dem timer nicht...

---

Ähm, da hatte ich mich missverständlich ausgedrückt. Sie müssten IN08_qst in der Kopie durch z.B. IN09_qst ersetzen (wie Ihre andere Fragen eben heißt).

Außerdem dürfen Sie die Variable natürlich nicht doppelt definieren. Es müsste z.B. wie folgt aussehen:

// Funktion zum Einblenden der Knöpfe
function showContent() {
  document.getElementById("IN08_qst").style.display = "";
  document.getElementById("IN09_qst").style.display = "";
}

// Nach dem Laden der Fragebogen-Seite das Script starten
SoSciTools.attachEvent(window, "load",
  function() {
    // Objekt heraussuchen und ausblenden
    document.getElementById("IN08_qst").style.display = "none";
    document.getElementById("IN09_qst").style.display = "none";
    // Den Timer starten
    window.setTimeout(showContent, 5000); // Nach 5 Sek. = 5.000 ms
  }
);

---

Jetzt bin ich verwirrt. Das erste auszublendende Element ist IN08, das zweite ist der timer... Deshalb steht in der ersten Zeile dann "timer" und in der zweiten "IN08_qst". Aber ich werde es nochmal versuchen..

---

Pardon, dann habe ich das falsch verstanden. Verwenden Sie in dem oben geänderten Code bitte nochmal "timer" statt IN09_qst. Klappt es dann?

---

Ja, jetzt geht's - vielen Dank :)!

---

Also eig. klappt das ganz gut, nur haben mir manche meiner pre-Tester berichtet, dass sie manchmal (wahrscheinlich wenn das java-script noch lädt) Frage bzw. timer für einen kurzen Moment sehen, bevor es dann für 5 Sekunden ausgeblendet wird. Mir selbst ist das auch passiert. Gibt es eine Möglichkeit, das zu unterbinden?

---

Prinzipiell können Sie das load-Event aus weglassen:

// Funktion zum Einblenden der Knöpfe
function showContent() {
  document.getElementById("IN08_qst").style.display = "";
  document.getElementById("IN09_qst").style.display = "";
}

// Objekt heraussuchen und ausblenden
document.getElementById("IN08_qst").style.display = "none";
document.getElementById("IN09_qst").style.display = "none";
// Den Timer starten
window.setTimeout(showContent, 5000); // Nach 5 Sek. = 5.000 ms

Diesen Code würden SIe dann unten auf die Seite setzen. Nachteil: Die 5 Sekunden rechnen dann auch die Ladezeit mit und der Teilnehmer hat evtl. eine geringere Wartezeit als 5 Sek.

---

Hmm, dh. bei Teilnehmern, wo der browser sehr langsam lädt könnte diese Wartezeit dann wohl schon erheblich verkürzt werden, nicht? Ca. eine Sekunde weniger würde nichts machen, aber mehr wäre mir dann doch zu riskant...

---

Sie können prinzipiell auch das Ausblenden (die beiden "none" Zeilen) aus der load-Funktion herausnehmen und den Rest (v.a. das Starten des Timers) drin lassen.

---

Also die none-Zeilen aus dem ursprünglichen code rauslöschen? Also dann z.b. folgenden Code verwenden?
<script type="text/javascript">
<!--
// Funktion zum Einblenden der Knöpfe
function showContent() {
  document.getElementById("IN08_qst").style.display = "";
  document.getElementById("timer").style.display = "";
}

// Nach dem Laden der Fragebogen-Seite das Script starten
SoSciTools.attachEvent(window, "load",
  function() {
    // Den Timer starten
    window.setTimeout(showContent, 5000); // Nach 5 Sek. = 5.000 ms
  }
);
// -->
</script>

Das klappt leider nicht, dann zeigt es mir Frage + timer sofort an..

---

Das ist in der anderen Frage schon erledigt, oder? Sie hatten dort das das focus() in die FUnktion showContent() eingebunden, oder?

---

Nein leider nicht - ich habe das Problem mit dem  focus() vorläufig mal gelöst, aber das ändert noch immer nichts an dem Problem, dass manchmal der item bzw. der timer noch 'aufblitzt' wenn die Seite zu lange lädt...

---

Achso. Okay, der Code bleibt, wie es war - nur die beiden Zeilen mit dem "none" nehmen Sie aus der Funktion heraus und schreiben Sie stattdessen an das Ende (vor dem // -->).

---

So?
<script type="text/javascript">
<!--
// Funktion zum Einblenden der Knöpfe
function showContent() {
  document.getElementById("IN08_qst").style.display = "";
  document.getElementById("timer").style.display = "";
  document.getElementById("IN08_01").focus();
}

// Nach dem Laden der Fragebogen-Seite das Script starten
SoSciTools.attachEvent(window, "load",
  function() {
    // Den Timer starten
    window.setTimeout(showContent, 5000); // Nach 5 Sek. = 5.000 ms
  });
// Objekt heraussuchen und ausblenden
    document.getElementById("IN08_qst").style.display = "none";
    document.getElementById("timer").style.display = "none";
// -->
</script>

Das klappt leider auch nicht - timer + Frage werden wieder von Anfang an angezeigt...

---

... und Sie haben diesen HTML-Code unter (!) die Frage IN08 und den Timer "timer" gepackt? Was sagt denn die JavaScript-Fehlerkonsole des Browsers?

---

Ah, das war's, jetzt hat's geklappt - Danke :)!