HTML CSS - Button soll 10 Sekunden nach dem Klick ausgeführt werden?

3 Antworten

Es gab hier letztens schon eine ähnliche Frage: https://www.gutefrage.net/frage/button-mit-wartezeit-html-css-php#answer-344751999

Den Link tauschst du gegen einen Button aus und die Funktion sollte auch anders heißen. Der Callback für setTimeout sollte zudem deine Aktion durchführen.

<button onclick="doSomething()" type="button">Do something</button>

yarazia 
Beitragsersteller
 13.04.2020, 09:47

Ich habe jetzt mit dem Code deiner Antwort von der anderen Frage. Nach dem Warten werde ich nun auf eine weitergeleitet. Es soll sich aber eine Datei downloaden lassen. Wie kriege ich das hin?

regex9  13.04.2020, 09:49
@yarazia

Statte den Linktag mit einem download-Attribut aus.

Hallo yarazia,

ich würde dir empfehlen, JavaScript zu lernen (oder dich intensiver damit zu beschäftigen), denn bei deiner Fragestellung scheint mir, dass du wenig bis gar keine Grundkenntnisse dahingehend besitzt.

Zunächst verbindest du dein Button mit der JavaScript-Funktion mit dem entsprechenden Event (in diesem Fall Click) und versiehst den Button mit einer ID, um den Button in JavaScript ändern zu können:

<button onclick="warte()" id="wartenSie">Klicken Sie hier</button>

Danach gehst du in deine JS-Datei und deklarierst die Funktion:

function warte(){

  //änderung vom button-text
  var button = document.getElementById("wartenSie");
  button.innerText = "Bitte warten Sie 10 Sekunden..."; //alternativ kannst du auch innerHTML benutzen

  //warten
  setTimeout(function(){
    //hier kommt das rein, was nach 10 sekunden passieren soll
  }, 10000); //diese 10000 ist in ms angegeben, also 10 sekunden

}
Woher ich das weiß:eigene Erfahrung – Viel Einsatz dessen in Freizeit

Google mal nach "settimeout" bei Google. So kannst du per Javascript/jQuery die eigentlich Action des Buttons verzögern.