Problem: Javascript nur einmal durchlaufen lassen?

[Gunnar Bittersmann]

@@ferdiseen

Beim draufklicken werden die Images unsichtbar und der Zahlenwert 1 wird am Rand hinzugefügt.

Es ist keine gute Idee, etwas Zusammengehörendes auf verschiedene Eventhandler zu verteilen. Wenn du willst, dass bei EINEM Click ein Bild unsichtbar wird UND ein Zähler erhöht wird, dann gehört beides in denselben Eventhandler:

function eventhandler(bild, material)
{
  verschwinden(bild);
  add(material);
}

function verschwinden(bild)
{
  …
}

function add(material)
{
  …
}

ALso keine getrennten click-Eventhandler für div und img, sondern sowas wie:

<img onclick="eventhandler(this.id, 'Marmor');" src="Marmor.png" id="Marmor1">

Dass JavaScript-Code nicht im HTML stehen sollte, sondern Eventhandler per addEventListener registriert werden sollten, sagte Camping_RIDER schon.

Die hohe Schule wäre, nicht für jedes Bild jeweils einen Eventhandler vorzusehen, sondern einen einzigen für alles und Eventdelegation zu nutzen.

Barrierefreiheit ist bei einem Spiel vielleicht kein Thema, dennoch hier als allgemeine Anmerkungen:

Den Bildern fehlt ihr Alternativtext.

Es ist selten eine gute Idee, irgendwelche HTML-Elemente mit click-Handlern auszustatten. Besser die Elemente verwenden, die nicht nur per Maus, sondern auch per Tastatur anclickbar sind: button.

LLAP 🖖