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;
  }

Answer 1

[Lezurex]

Du rufst die play-Funktion einfach in der pluszahl-Funktion auf.

Im Übrigen würde ich EventListener anstelle von den Event Attributen nutzen.

Eleganter wäre es ebenfalls noch, wenn du drei Funktionen hast: Eine für die Audio, eine für die Pluszahl und schlussendlich noch eine, welche beim Event aufgerufen wird und die anderen zwei aufruft.

Woher ich das weiß: Berufserfahrung – Informatiker Applikationsentwicklung

Comments

[Jqjsjskqkqkw]

Ja hab die funktionen vereinig wie es ein user hier auch empfohlen hat. Vielen Dank auch für die Tipps, werde versuchen das hinzukriegen

Answer 2

[PWolff]

Da steht ein Semikolon zwischen den Attributen von <button>.

Google sagt mir nichts zum Attribut namens twocklick.

Vermutlich meinst du

<button onclick="pluszahl(); play()"    class="button1">

Woher ich das weiß: Berufserfahrung – Software-Entwickler

Comments

[Jqjsjskqkqkw]

Dankeee hat funktioniert. Und ja hab twoclick nur ausprobiert und vergessen zu löschen xD

[PWolff]

@Jqjsjskqkqkw

Übrigens, es gibt ondblclick

Answer 3

[medmonk]

// Elemente als Konstante speichern
const button1 = document.querySelector('.button1');
const resArea = document.querySelector('#resultArea');

// Beliebige Funktionen erstellen
function play() { // ... };
function plus() { // ... };

// Beliebige Funktionen gruppieren
function btnPlayPlus() {
  play();
  plus();
};

// Funktion(en) mit einem Click-Event zuweisen
button1.addEventListener('click', btnPlayPlus);

LG medmonk

Woher ich das weiß: Berufserfahrung – UI/UX Designer, Full-Stack Developer

Answer 4

[FaTech]

Lass das onclick weg und nutze richtige Events, so wie es sich gehört. Dann kannst du so viel aufrufen, wie du willst

Comments

[Jqjsjskqkqkw]

Welche Events sollte ich dann nutzen? Habe halt erst jetzt mit Js angefangen

[FaTech]

@Jqjsjskqkqkw

Google mal nach click Event.

Da gibt es viele Infos zu.

https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event

Answer 5

[Noelvernichter2]

const button1 = document.querySelector('.button1');

const resArea = document.querySelector('#resultArea');

// Beliebige Funktionen erstellen

function play() { // ... };

function plus() { // ... };

// Beliebige Funktionen gruppieren

function btnPlayPlus() {

play();

plus();

};

// Funktion(en) mit einem Click-Event zuweisen

button1.addEventListener('click', btnPlayPlus);