Beim click auf einen button einen sound machen, JavaScript?

Hallo, ich habe einen Button erstellt undzwar:

<button class="button"> Bam </button>

Jetzt will ich dass bei jedem klick auf dem Button ein Sound abgespielt wird.

Wie soll ich das in JavaScript schreiben?

2 Antworten

EinAlexander

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, JavaScript

16.06.2022, 17:48

Wie soll ich das in JavaScript schreiben?

<script>
function playsound(file) {
  new Audio(file).play();
}
</script>

<button onclick="playsound('bam.wav')">Bäm</Button>

Alex

TechPech1984

Nutzer, der sehr aktiv auf gutefrage ist

im Thema Computer

16.06.2022, 17:40

<button class="button" onclick="hierdeinefunktion()"> Bam </button>

und hier das javascript beispiel

https://www.codegrepper.com/code-examples/html/sound+play+function+javascript

Jqjsjskqkqkw

Fragesteller

16.06.2022, 17:50

Dankeeee hat funktioniert

Ähnliche Fragen

Zwei funktionen auf ein button packen?

Wie kann ich zwei funktionen auf einen Button packen? Also ich will das bei jedem click auf meinen button

1. immer plus 1 addiert wird: onclick="pluszahl()"

2. das ein Sound abgespielt wird: onclick="play()"

Leider konnte ich nur den counter machen und frage mich jetzt wie ich den sound auch aktivieren kann

HTML:

    <span class="center">Bam?</span>
    <div onclick="custom()" class="btn-container">
        <button onclick="pluszahl()"; twoclick="play()"    class="button1">
            Bam
        </button>
    </div>

    <div id="resultArea">0</div>

JavaScript:

function play() {
  var audio = new Audio('bam.mp3');
  audio.play();
}

function pluszahl() {
  document.getElementById("resultArea").innerHTML = parseInt(document.getElementById("resultArea").innerHTML)+1;
  }

...zur Frage

Javascript Button erstellen?

Hallo,

ich habe einen Button in HTML erstellt und möchte, dass dieser per Click, die Farbe eine Textelements in Schwarz ändert. Den Button habe ich erstellt, komme aber bei der Funktion nicht weiter, kann jemand helfen? Danke im Voraus.

<button type="button" onclick=document.getElementById('Liste').style.color = 'black'">Drück mich!</button>

Aktueller Stand

...zur Frage

JavaScript: Bei jedem Klick plus 1 in der resultArea?

Moin, ich habe einen Button gemacht und zwar:

<div onclick="play()" class="button">
  <button class="button1">
    Bam
  </button>
</div>

und eine Result Area

<div id="resultArea"></div>

Wie kann ich es machen, dass bei jedem Klick auf den Button in der Result Area 1 addiert wird (sowas wie ein Cookie-Klicker)? Also so eine Art Counter.

...zur Frage

Ton abspielen Javascript?

Hallo,

Ich möchte auf meiner html Seite einen Sound abspielen, wenn ein Button geklickt wird. Die Seite läuft über den Localhost.

html:

 <script src="script.js"></script>
    <script src="anmeldungj.js"></script>
   <script src="/socket.io/socket.io.js"></script>
    <audio id="ringtone" src="Sound2.mp3"></audio>

JavaScript

var RingSound;
var Sound = new Audio('Sound2.mp3')
RingSound = document.getElementById("ringtone");
...
function Send() {
    if (delay && messageInput.value.replace(/\s/g, "") != "") {
        delay = false;
        setTimeout(delayReset, 1000);
        socket.emit("send", messageInput.value);
        messageInput.value = "";
        RingSound.play();
        Sound.play();
    }
}

Der Pfad stimmt:

Es wird aber kein Sound abgespielt, ich habe es über zwei Varianten versucht.

Ich hoffe jemand kann mir helfen

Jannik

...zur Frage

Hallo, wie kann ich einen Button in HTML/Javascript erstellen, der die Farbe ändert?

Ich möchte einen Button erstellen, der dann die Textfarbe von einer Liste ändert. Also die Begriffe in der Liste sind zuerst rot und sollen nach dem Klick auf einen Button schwarz werden. Geht das?

Ich habe die Schriftfarben mit CSS über eine ID gemacht:

diese 3 Punkte sollen über einen Klick auf einen Button schwarz werden.

...zur Frage

Gewinnmeldung & Neustart in TicTacToe, wie mache ich das?

Hi, ich muss für die Schule ein Tic Tac Toe Spiel programmieren und mir fehlen noch 2 Sachen bis ich das Spiel fertig habe. 1. wenn 3 X's oder O's in einer Reihe/Zeile/Diagonale sind, sollte irgendeine Gewinnmeldung kommen oder nichts mehr drückbar sein. Und 2. Ein Button wo mit ich das Spiel neustarten kann. Ich weiss jetzt nicht genau wie ich das machen soll, da ich nicht sehr gut in Programmieren bin. Könnte mir jemand vielleicht dabei helfen?

Danke im Vorraus!

btw so sieht mein Code bis jetzt aus:

<!DOCTYPE html>

<html>

<head>

<style>

.button {

background-color: #EE82EE; /* Violet */

color: black;

padding: 80px 80px;

text-align: center;

border-style: solid;

}

div {padding-right: 350px;

float: right;

display: grid;

grid-template-columns: auto auto auto;}

.py-script {display: none;}

h1 {text-align: center;

padding: 5px;}

#myHeader {background-color: Violet;

color: black;

padding: 40px;

text-align: center;

font-size: 30px;

font-weight: bold;}

</style>

</head>

<h1 id="myHeader">Welcome to tic tac toe</h1>

<h1 style="font-size:20px;">Enjoy your time here and Good luck!</h1>

<h1 style="font-size:20px;">May the best player win</h1>

<py-script>

x=1

a=[0,1,2,3,4,5,6,7,8,9]

def click(n):

global x

if x==1 and n==a[n]:

document.getElementById("button" + str(n)).innerHTML = "X"

x=2

a[n]="x"

elif n==a[n]:

document.getElementById("button" + str(n)).innerHTML = "O"

x=1

a[n]="o"

</py-script>

<div>

</div>

</body>

</html>

...zur Frage

Daten aus MySQL auf Website darstellen?

Ich habe Daten in einer MySQL Datenbank, die ich gerne auf einer Website darstellen möchte, jeweils immer beim Klick auf einen Button (pro Button eine etwas andere Abfrage)

Eine entsprechende Abfrage dafür wird in JavaScript bereits erstellt.

Jetzt müssen die Daten nur noch abgerufen und eingefügt werden. - Nach allem, was ich gelesen habe, soll es sehr umständlich sein, MySQL in JavaScript zu verbinden.

Bisher habe ich probiert, die Abfrage per Cookie in PHP zu übertragen, dort die Daten abzufragen und zu echoen - das ganze mit einem getElementById().innervalue = ..., sodass immer die aktuelle Abfrage im DOM-Element ist, das passiert aber nur beim ersten Mal.

Das Abfragen der Daten in PHP und Zurückgeben an JS hat weder über einen Cookie, noch ein echo funktioniert.

...zur Frage

Wie kann ich einen kurzen Text mit HTML und JavaScript auf Knopfdruck ändern?

Hallo, ich würde gern mit HTML und JavaScript erreichen, dass ich "Text1" angezeigt bekomme und darunter ein "Weiter"-Button liegt, der dann mittels Klick "Text1" mit "Text2" austauscht, "Text2" mit "Text3" etc.

hatte mir dafür einen code mit Klickzähler herausgesucht, der auch Funktioniert. Der Plan wäre es, den Klickzähler dafür zu nutzen, um die Zahl zu erhöhen und von dieser Zahl den ausgespielten Text abhängig zu machen.

Also z.B. Zahl 1 = Text1 und Zahl 2 = text2 usw.

Allerdings verstehe ich noch nicht , wie ich den Text mit der Zahl verknüpfe und diesen dann ausspielen lassen kann.

Habt ihr da vllt eine Idee oder einen Tipp, bzw. aber auch eine bessere Lösung?

Vielen Dank im Voraus!

<div>
  <center><h3 id="counter-label">0</h3></center>
   
<center>
  <div>
    <button onclick="incrementClick()">Click Me</button>
    <button onclick="resetCounter()">Reset</button>
  </div>
</center>
   
   
   
<script>
var counterVal = 0;
function incrementClick() {
  updateDisplay(++counterVal);
}
function resetCounter() {
  counterVal = 0;
  updateDisplay(counterVal);
}
function updateDisplay(val) {
  document.getElementById("counter-label").innerHTML = val;
}

...zur Frage

JavaScript: Text nach Button-Klick in Textfeld?

Ich habe so eine Seite :

<li class="items">
    <p>some text 1</p>
    <div><button class="link" value="1">Wählen</a></div>
</li>
<li class="items">
    <p>some text 2</p>
    <div><button class="link" value="2">Wählen</a></div>
</li>
<li class="items">
    <p>some text 3</p>
    <div><button class="link" value="3">Wählen</a></div>
</li>



<form action="send" method="POST">
    <input type="text" name="text" id="text" required>
    <input type="number" name="zahl" id="zahl">
    <button type="submit" name="submit">Senden</button>
</form>

oben sind mehrere Texte mit je einem Button zum Auswählen (derzeit ohne funktion). Unten ist dann ein Formular und man kann selbst die Zahl des Textes dort eintragen.

Jetzt will ich das aber für leute vereinfachen und ermöglichen, dass man einfach auf den jeweiligen Button klickt und dann die Zahl (das value des Buttons) in das textfeld "number" eingetragen wird. Wie kann ich das mit javascript machen ? außerdem sollte der cursor direkt in das textfeld "text" gehen.

...zur Frage

Wo soll ich meine elemente in dem Javascript einfügen?

<script>
      document.addEventListener('DOMContentLoaded', function() {
          const scrollButtons = document.querySelectorAll('.button1');

          scrollButtons.forEach(button => {
              button.addEventListener('click', function() {
                  const target = button.getAttribute('data-target');
                  const targetElement = document.getElementById(target);

                  if (targetElement) {
                      window.scrollTo({
                          top: targetElement.offsetTop,
                          behavior: 'smooth'
                      });
                  }
              });
          });
      });
  </script>

Hi,

AI hat mir den code gegeben um meine buttons nützlich zu machen. Weil ich kein Javascript kann weiß ich nicht wo ich meine class namen einfügen soll.

Bitte helft mir

LG Lisa

...zur Frage

Wordpress Template wird nicht live angezeigt?

Hallo,

ich habe ein Wordpress Template erstellt und möchte es per Klick auf einen Button anzeigen lassen. Allerdings kommt auf der Live-Seite nur die Meldung [Elementor-template...]. In meiner Vorschau funktioniert alles wie es soll. Habt ihr eine Ahnung an was es liegen könnte?

...zur Frage

Seite wird bei Weiterleitung nicht richtig angezeigt?

Hey,

Ich programmiere gerade etwas in PHP, CSS, HTML, JS... Ich habe ein Button gemacht und wenn mann auf ihn clickt soll mann weitergeleitet werden (JavaScript Funktion).

Die Weiterleitung funktioniert aber wenn mann auf der Seite ist wird nur der PHP Quell text angezeigt...

Ich bitte um hilfe!

Code:

JavaScript Weiterleitung:

<script type="text/javascript">
window.location = "login.php";
</script>

Button:

<form action="weiterleitung-login.html" method="post" class="buttons"><input type="submit" value="Einloggen" class="login"></form>

MfG Dominik

...zur Frage

Clickfunnel: Wieso funktioniert nur jedes zweite JavaScript-Element?

Ich habe in meinem ClickFunnel vier JavaScript-Elemente. Sie sind nicht direkt hintereinander, aber genau gleich gecodet.

Es handelt sich dabei um Dropdown-Elemente.

Mein Problem ist, dass das erste und dritte Element problemlos funktioniert, aber das zweite und vierte nicht. Da kommt kein Dropdown, wenn ich darauf klicke, obwohl alle Elemente gleich gecodet sind.

Woran könnte das liegen? Stehen die einander vielleicht im Weg? Ich kann es auch leider nicht anders machen, da zwischen den Elementen Bilder sind, die dazu gehören.

Hier mein Code (HTML / JS) von einem Element:

<div class="all4">
  <div class="obj">
    <button class="Produkte" style="margin-right: 1vw;">Kompressor</button>
    <div class="panel">
      <p>
        Tankinhalt: 2 × 50 Liter</br>
        Energiequelle: Honda 4Takt GX200 bleifrei</br>
        Antrieb: Riemen</br>
        Atom. Standgas: Ja</br>
        Start: Zugseil</br>
        Abgabeleistung: 490 Liter Minute bei 12 bar</br>
        Abgabeleistung: 550 Liter Minute bei 6 bar</br>
        Max. Druck: 12 bar</br>
        Abmessungen: 95cm × 51cm × 85cm (ohne Transportgriffe)</br>
        Gewicht: ca. 75 Kg</br>
        Lärm: ca. 95 Db</br>
        Garantie: 1 Jahr</br>
      </p>
    </div>
  </div>
  <script>
    var acc = document.getElementsByClassName("Produkte");
    var i;

    for (i = 0; i < acc.length; i++) {
      acc[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;

        if (panel.style.display === "block") {
          panel.style.display = "none";
        }
        else {
          panel.style.display = "block";
        }
      });
    }
  </script>

...zur Frage

Wie kann ich einem Button (html, css, javascript) mehrere Funktionen zuweisen?

Hallo Zusammen, ich bin Neuling und möchte einen Button erstellen, welcher drei verschiedene Textfarben von einer Liste ändert. Also die Begriffe in der Liste sind zuerst rot, orange, gelb und sollen nach dem Klick auf einen Button schwarz werden.

Kann mir dabei jemand helfen?

Dabei soll die Formatierung der Textzeilen genau so bleiben:

Danke und liebe Grüße

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen