Beim Klicken auf einen selbst erstellten Play-Button werde ich fälschlicherweise auf die nächste Seite weitergeleitet

Question

Liebes Supportteam,

ich habe für das Abspielen einer Audiodatei folgenden HTML-Code:

<audio id="player1" preload="auto" controls controlsList="nodownload" style="position: absolute; left: -9999px; top: -9999px">
<source src="JJ_MariaIoudenitch_Ausschnitt1_Audio_LUFS.mp3" type="audio/mp3" />
  Ihr Browser kann diese Audio-Datei leider nicht abspielen
</audio>

<input type="image"  src="Play.png" onclick="document.getElementById('player1').play()" alt="Play">
<input type="image" src="Pause.png" onclick="document.getElementById('player1').pause()" alt="Pause">

Wenn ich auf eines der Input-Bilder klicke, wird nicht die Musik abgespielt, sondern ich lande auf der nächste Seite der Befragung. Das sollte ja so eigentlich nicht sein und auch der Javascript-Code löst das nicht aus. Was mache ich falsch?

Vielen Dank!

Answer 1

Die W3-Referenz sagt:

The defines an image as a submit button.

Heißt: Wenn Sie ein <input type="image"> verwende, dann schickt der Browser die aktuelle Seite ab. Verwenden Sie stattddessen einen <button type="button">

<button type="button" onclick="document.getElementById('player1').play()" >
  <img src="Play.png" alt="Play">
</button>