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

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 :)!