[Javascript] Eingefügte Buttons führen zu Verhalten wie bei "Weiter"

Question

Hallo,

ich brauche für eine Studie eine Stoppuhr-Funktionalität. Den gestoppten Wert möchte ich dann in einer Variablen abspeichern.
Hierzu habe ich folgenden Code als Text Hinterlegt und in meinen Fragebogen hinzugefügt:

 <div id="zeitanzeige">00:00:00.000</div>
    <div id="button-behaelter">
        <button onclick="start()">Start</button>
        <button onclick="pause()">Stopp</button>
        <button onclick="ruecksetzen()">Reset</button>
        <button onclick="speichern()">Speichern</button>
    </div>

<script type="text/javascript">
<!--

const anzeige = document.getElementById("zeitanzeige");

var gestoppteZeit = 0;
var pausiert = true;
var letzterDurchlauf = new Date();

function speichern(){
    pausiert = true;
    document.getElementById("IA11_01").value = gestoppteZeit;
}

function start() {
    pausiert = false;
}

function pause() {
    pausiert = true;
}

function ruecksetzen() {
    pausiert = true;
    gestoppteZeit = 0;
    aktualisiereAnzeige();
}

function aktualisiereZeit() {
    if(pausiert === false) {
        gestoppteZeit += new Date() - letzterDurchlauf;
        aktualisiereAnzeige();
    }

    letzterDurchlauf = new Date();
    setTimeout(aktualisiereZeit, 1);
}

function aktualisiereAnzeige() {
    let millisekunden = gestoppteZeit % 1000;
    let sekunden = Math.floor(gestoppteZeit / 1000) % 60;
    let minuten = Math.floor(gestoppteZeit / 60000) % 60;
    let stunden = Math.floor(gestoppteZeit / 3600000);

    stunden = stunden < 10 ? "0" + stunden : stunden;
    minuten = minuten < 10 ? "0" + minuten : minuten;
    sekunden = sekunden < 10 ? "0" + sekunden : sekunden;
    millisekunden = "000" + millisekunden;
    millisekunden = millisekunden.slice(millisekunden.length - 3);

    anzeige.innerHTML = stunden + ":" + minuten + ":" + sekunden + "." + millisekunden;
 
}

aktualisiereZeit();
 
// -->
</script>

Hinweis: Der Code stammt ursprünglich von dev-planet-germany
In der Vorschau des Textes funktionieren die Buttons einwandfrei. Nur das Abspeichern in die Variable konnte ich so natürlich nicht testen.

Wenn ich die Vorschau in einem neuen Fenster anzeigen lasse, läuft die Stoppuhr nur ein paar Zehntelsekunden und springt dann wieder auf '00:00:00.000'.

Wenn ich dieses Textelement meinem Fragebogen hinzufüge, führt der Klick auf einen der eingefügten Buttons (egal welcher) dazu, dass die Fragebogenseite verlassen wird (wie bei einem Klick auf "weiter").

Ich verstehe nicht, was dieses Verhalten auslöst. Ich vermute, dass der Klick auf "meine" Buttons auch die "submit()" Routine aufruft, ich weiß aber nicht, wie ich das verhindern kann.

Vielen Dank vorab für eure Hilfe!

Comments

Der Trick lautet <button type="button"> ... mehr dazu in der oben verlinkten Antwort.

---

Vielen Dank! Manchmal kann es so einfach sein...