JavaScript Code bricht mittendrin ab

Question

Hallo zusammen,

ich habe folgendes Problem: Wenn ich meinen HTML / Javascript-Code, der einen Button enthält, in eine Seite einbaue und beim Testen auf den Button klicke, wird der restliche Vorgang auf der Seite abgebrochen und zur nächsten Seite weitergeleitet. Der Button dient dazu, verstecke Elemente (HiddenElements Audio und BIld) anzuzeigen. Mir ist aufgefallen, dass sich dabei die URL der Seite nach dem Buttonclick verändert und ich denke es könnte damit zusammenhängen.

Ich hoffe, ihr könnt mir weiterhelfen, da ich wirklich ratlos bin.

Herzlichen Dank und viele Grüße

Comments

Könnten Sie einmal ihren benutzten code posten und ggf noch einen Pretest Link, der direkt auf die angesprochene Seite verweist.

---

Vielen Dank für die schnelle Rückmeldung!!

Hier der Pretest Link:https://www.soscisurvey.de/MA_julianbueno/?act=2u4QysVFLw8jIT4I4Zb3YURh

Der Code lautet wie folgt (ich habe allerdings die sources geschwärzt); als .html Datei in Firefox funktioniert er übrigens:

        <script language="javascript" type="text/javascript">
            function Sleep(milliseconds) {
               return new Promise(resolve => setTimeout(resolve, milliseconds));
            }
       
            function hide(hideElem, showElem) {
             document.getElementById(hideElem).style.display ="none";
             document.getElementById(showElem).style.display = "block";
             document.getElementById("audio1").play();
            }
           
            async function hide2(hideElem, showElem) {
             document.getElementById(hideElem).style.display ="none";
             await Sleep(3000);
             document.getElementById(showElem).style.display = "block";
             document.getElementById("audio1").play();
            }
        </script>

        <button id="button" onclick="hide('button','div1')">Click Me</button>
        <div id="div1" style="display:none">
            1
            <audio id="audio1" src="---.mp3" type="audio/mpeg"></audio></br>
            <img src="---.png" /></br>
            <button id="button" onclick="hide('div1','div2')">Click Me</button>
        </div>
        <div id="div2" style="display:none">
            2
            <audio id="audio1" src="---.mp3" type="audio/mpeg"></audio></br>
            <img src="---.png" /></br>
            <button id="button" onclick="hide2('div2','div3')">Click Me</button>
        </div>
        <div id="div3" style="display:none">
            3
            <audio id="audio1" src="---.mp3" type="audio/mpeg"></audio></br>
            <img src="---.png" /></br>
        </div>

Answer 1

Ich denke, das Problem liegt hier:

<button id="button" ...

Es müste heißen

<button type="button"

Wenn der "type" nicht gesetzt wird, nimmt JavaScript <irony> total intuitiv </irony> den Typ "submit" an und der Knopf wird damit zum Weiter-Knopf.

Comments

Genial! Wenn ich <button type="button" id="button"... benutze funktioniert es. Vielen, vielen Dank!