setTimeout in einer Funktion

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas
na-web

na-web hat kostenlosen Webspace.

7:46, 11.9.2017
Hallo
Ich habe das Problem, dass ich einen Button habe, wenn man ihn anklickt wird ein Text eingeblendet (mit Javascript), nach einer bestimmten Zeit soll der Button aber wieder ausgeblendet werden (ebenfalls mit Javascript). Ich habe nun das Problem, dass es mit setTimeout() nicht funktioniert. Um genau zu sein ruft der Button also die Funktion auf, dass soll dann nach einer bestimmten Zeit aber wieder rückgängig gemacht werden. Habt ihr eine Idee, wie man das machen könnte?
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
fuerderer

fuerderer hat kostenlosen Webspace.
9:35, 11.9.2017
Das ist nicht besonders schwer. Wenn du uns zeigst, was du bereits versucht hast, können wir sicher helfen, vielleicht hast du ja einfach einen kleinen Fehler drin.

Grob läuft das etwa so ab:
```
function onButtonClick() {
  // Text einblenden
  setTimeout(function() {
    // Text, Button, was auch immer wieder ausblenden
  }, 5000)
}
```
Das musst du jetzt natürlich an deine Umgebung anpassen. Ich weiß ja nicht wie deine Seite aufgebaut ist und wie die betroffenen Elemente für Javascript ansprechbar sind.
Autor dieses Themas
na-web

na-web hat kostenlosen Webspace.
12:11, 11.9.2017
Also, eigentlich ist es kein Button sondern ein Tastendruck, der das ganze auslöst:
HTML-Code
```
<body onkeydown="KeyCheck()"><span id="Text"></span>
```
und der Javascriptcode:
```
function KeyCheck() {
    var KeyID = event.keyCode;
    if(KeyID==83) {
        document.getElementById("Text").innerHTML = "Der Text";
        setTimeout(function { document.getElementById("Text").innerHTML = "";  }, 3000);
    }
}
```
Aber irgendwie klappt das bei mir nicht! Und ganz abgesehen davon, einen Intervall kriege ich auch nicht hin, obwohl ich gerne möchte, klappt irgendwie nur in der Funktion drin nicht!

Beitrag zuletzt geändert: 11.9.2017 12:28:24 von na-web

14:00, 11.9.2017

Beim Test hab ich zwei Fehler gefunden:
1. Bei der function-Deklaration im setTimeout (Zeile 11) fehlt ein rundes Klammernpaar, direkt nach dem wort "function".
2. Das "event" musst du beim Aufruf von KeyCheck übergeben (Zeile 16) und in der Funktionsdeklaration entgegen nehmen (Zeile 7), sonst kannst du nicht darauf zugreifen.

Hier ist das Ergebnis, zumindest bei mir funktioniert es jetzt.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Versuch</title>
    <script>
function KeyCheck(event) {
    var KeyID = event.keyCode;
    if(KeyID==83) {
        document.getElementById("Text").innerHTML = "Der Text";
        setTimeout(function() { document.getElementById("Text").innerHTML = "";  }, 3000);
    }
}
    </script>
  </head>
  <body onkeydown="KeyCheck(event)">
    <span id="Text"></span>
  </body>
</html>

Autor dieses Themas
na-web

na-web hat kostenlosen Webspace.

18:48, 11.9.2017
Top! Danke für die Hilfe funktioniert jetzt prima. Noch eine Frage, wie hast du die Fehler so schnell gefunden? Ich habe die Fehler nicht gefunden!
fuerderer

fuerderer hat kostenlosen Webspace.

19:17, 11.9.2017
Dass hinter dem function Schlüsselwort ein Klammerpaar fehlt, ist mir nicht sofort aufgefallen. Ich habe deinen Beispielcode zum Test in ein neues HTML-Dokument eingefügt und dann mit Firefox geöffnet. Wenn es irgendwelche Fehler, in diesem Fall Syntaxfehler gibt, steht dann in der Webkonsole eine Fehlermeldung mit Zeilennummer und sogar Zeichenposition. Schaut man dann nochmal genauer an die Stelle, fällt der Fehler auch meistens schnell auf.

Den anderen Fehler, dass du das event nicht übergeben hast, hab ich direkt entdeckt. Aber auch hier hätte die Webkonsole weiter geholfen. Die beschwert sich dann, dass die Variable "event" den Wert undefined enthält und kein Attribut "keyCode" besitzt.

Klar, als Entwickler muss man auch lernen seine eigenen Fehler zu finden, auch wenn es keine Fehlermeldungen gibt. Ich baue dazu meistens Ausgaben in meine Programme ein, in Javascript geht das z.B. mit console.log()
So kann man den Programmablauf generell oder auch bestimmte Variablenwerte untersuchen und damit den Fehler eingrenzen, bis man ihn schließlich gefunden hat.
Autor dieses Themas
na-web

na-web hat kostenlosen Webspace.

7:51, 12.9.2017
Also noch einmal danke, ich werde es auch mal mit solchen Ausgaben versuchen!
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city