Problem: Javascript nur einmal durchlaufen lassen? von Jörg Reinholz, 19.12.2015 19:14

Problem: Javascript nur einmal durchlaufen lassen?

ferdiseen 19.12.2015 16:22 (Versionen)

javascript

Hi! Gibt es eine Möglichkeit, eine Funktion nur ein Mal durchlaufen zu lassen? Es regnet von der Decke Marmor, Stein und Eisen. Beim draufklicken werden die Images unsichtbar und der Zahlenwert 1 wird am Rand hinzugefügt. Nur leider wird der Zahlenwert auch hinzugefügt, wenn man auf die unsichtbaren Elemente klickt. Ich hab hier mal einen Ausschnitt aus dem Skript:

<script language="javascript" type="text/javascript" >		
		function Verschwinden(){
		document.getElementById("Marmor1").style.display="none";
		}
		function Verschwinden2(){
		document.getElementById("Marmor2").style.display="none";
		}
		function Verschwinden3(){
		document.getElementById("Marmor3").style.display="none";
		}
		function Verschwinden4(){
		document.getElementById("Marmor4").style.display="none";
		}
		function Verschwinden5(){
		document.getElementById("Marmor5").style.display="none";
		}
		
		function Verschwinden6(){
		document.getElementById("Stein1").style.display="none";
		}
		function Verschwinden7(){
		document.getElementById("Stein2").style.display="none";
		}
		function Verschwinden8(){
		document.getElementById("Stein3").style.display="none";
		}
		function Verschwinden9(){
		document.getElementById("Stein4").style.display="none";
		}
		function Verschwinden10(){
		document.getElementById("Stein5").style.display="none";
		}
		
		function Verschwinden11(){
		document.getElementById("Eisen1").style.display="none";
		}
		function Verschwinden12(){
		document.getElementById("Eisen2").style.display="none";
		}
		function Verschwinden13(){
		document.getElementById("Eisen3").style.display="none";
		}
		function Verschwinden14(){
		document.getElementById("Eisen4").style.display="none";
		}
		function Verschwinden15(){
		document.getElementById("Eisen5").style.display="none";
		}
		
		
		
		
		var Ergebnis = 0;
		function Add1() {
			Ergebnis = Ergebnis + 1;
			document.getElementById("AUSGABE2").innerHTML = Ergebnis;
			var max = 1;
		}
		function Add2() {
			Ergebnis = Ergebnis + 1;
			document.getElementById("AUSGABE3").innerHTML = Ergebnis;
		}
		function Add3() {
			Ergebnis = Ergebnis + 1;
			document.getElementById("AUSGABE1").innerHTML = Ergebnis;
		}
		
		</script>

<body>
	

	<div onclick="Add1()"><img onclick="Verschwinden()" src="Marmor.png" id="Marmor1"></div>
	<div onclick="Add1()"><img onclick="Verschwinden2()" src="Marmor.png" id="Marmor2"></div>
	<div onclick="Add1()"><img onclick="Verschwinden3()" src="Marmor.png" id="Marmor3"></div>
	<div onclick="Add1()"><img onclick="Verschwinden4()" src="Marmor.png" id="Marmor4"></div>
	<div onclick="Add1()"><img onclick="Verschwinden5()" src="Marmor.png" id="Marmor5"></div>
		
	<div onclick="Add2()"><img onclick="Verschwinden6()" src="Stein.png" id="Stein1"></div>
	<div onclick="Add2()"><img onclick="Verschwinden7()" src="Stein.png" id="Stein2"></div>
	<div onclick="Add2()"><img onclick="Verschwinden8()" src="Stein.png" id="Stein3"></div>
	<div onclick="Add2()"><img onclick="Verschwinden9()" src="Stein.png" id="Stein4"></div>
	<div onclick="Add2()"><img onclick="Verschwinden10()" src="Stein.png" id="Stein5"></div>
		
	<div onclick="Add3()"><img onclick="Verschwinden11()" src="Eisen.png" id="Eisen1"></div>
	<div onclick="Add3()"><img onclick="Verschwinden12()" src="Eisen.png" id="Eisen2"></div>
	<div onclick="Add3()"><img onclick="Verschwinden13()" src="Eisen.png" id="Eisen3"></div>
	<div onclick="Add3()"><img onclick="Verschwinden14()" src="Eisen.png" id="Eisen4"></div>
	<div onclick="Add3()"><img onclick="Verschwinden15()" src="Eisen.png" id="Eisen5"></div>
		
	<img src="eisenbruch.png" id="bruch1">
		<div id="anzahlbruch1"><span id="AUSGABE1">0</span> x</div>
	<img src="Marmorbruch.png" id="bruch2">
		<div id="anzahlbruch2"><span id="AUSGABE2">0</span> x</div>
	<img src="Steinbruch.png" id="bruch3">
		<div id="anzahlbruch3"><span id="AUSGABE3">0</span> x</div>
	
</body>

Beitrag melden

– Informationen zu den Bewertungsregeln

Problem: Javascript nur einmal durchlaufen lassen?
MudGuard Homepage des Autors 19.12.2015 16:50

javascript
– Informationen zu den Bewertungsregeln
Hi,

Gibt es eine Möglichkeit, eine Funktion nur ein Mal durchlaufen zu lassen? Es regnet von der Decke Marmor, Stein und Eisen. Beim draufklicken werden die Images unsichtbar und der Zahlenwert 1 wird am Rand hinzugefügt. Nur leider wird der Zahlenwert auch hinzugefügt, wenn man auf die unsichtbaren Elemente klickt. Ich hab hier mal einen Ausschnitt aus dem Skript:
1. Zähle nicht blindlings hoch, sondern nur dann, wenn das betroffene Element sichtbar ist.
2. anstelle von zig praktisch identischen Funktionen benutze eine, die für die kleinen Unterschiede Parameter bekommt.
cu,
Andreas a/k/a MudGuard
Beitrag melden

–
Informationen zu den Bewertungsregeln
1. Problem: Javascript nur einmal durchlaufen lassen?
  
  Camping_RIDER Homepage des Autors 19.12.2015 20:58
  
  javascript
  – Informationen zu den Bewertungsregeln
  Aloha ;)
  Zähle nicht blindlings hoch, sondern nur dann, wenn das betroffene Element sichtbar ist.
  Oder: benutze sinnvollerweise addEventListener und removeEventListener (beim sichtbar/unsichtbar machen der Elemente) statt den eher antiquierten on*-Attributen - damit kannst du sicherstellen, dass die Hochzählfunktion nur dann mit dem Element verknüpft ist, wenn das auch sinnvoll ist (lies: wenn das Element sichtbar ist)
  
  Grüße,
  
  RIDER
  
  --
  Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller Erreichbar manchmal im Self-TS (ts.selfhtml.org) oder sonst - wenn online - auf dem eigenen TeamSpeak-Server (fritz.campingrider.de) oder unter: # Facebook # Twitter # Steam # YouTube # Self-Wiki # ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
  Beitrag melden
  
  –
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum

Problem: Javascript nur einmal durchlaufen lassen?

Jörg Reinholz Homepage des Autors 19.12.2015 19:14 (Versionen)

javascript

– Informationen zu den Bewertungsregeln

Moin!

Mudgard meint statt

<script language="javascript" type="text/javascript" >		
		function Verschwinden(){
		document.getElementById("Marmor1").style.display="none";
		}
…
		function Verschwinden15(){
		document.getElementById("Eisen5").style.display="none";
		}

sowas:

<script>
function Verschwinde(id){
  document.getElementById(id).style.display="none";
}

und den Aufruf mit:

<div onclick="Add1()"><img onclick="Verschwinde('Marmor1')" src="Marmor.png" id="Marmor1"></div>
…
<div onclick="Add3()"><img onclick="Verschwinde('Eisen5')" src="Eisen.png" id="Eisen5"></div>

Das lösen wor dann mal noch weiter auf und damit ein Problem:

<div><img onclick="Add1(); Verschwinde('Marmor1')" src="Marmor.png" id="Marmor1"></div>
…
<div><img onclick="Add1(); Verschwinde('Eisen5')" src="Eisen.png" id="Eisen5"></div>

Ich bin mir sicher, das div brauchst Du dann nicht mehr:

<img onclick="Add1(); Verschwinde('Marmor1')" src="Marmor.png" id="Marmor1">
…
<img onclick="Add3(); Verschwinde('Eisen5')" src="Eisen.png" id="Eisen5">

Jetzt erst sehe ich: Du lässt ja immer genau das Element verschwinden, auf welches geklickt wird! Das geht besser:

<img onclick="Add1(); this.style.display='none';" src="Marmor.png" id="Marmor1">
…
<img onclick="Add3();  this.style.display='none';" src="Eisen.png" id="Eisen5">

Die Funktionen verschwinde* entfallen also ganz. Aber vielleicht willst Du Diese nicht nur nicht anzeigen, sondern aus dem Dom entfernen. Wie ich lese fallen die ja herunter. Das bedeutet demnach, dass für diese weiterhin völlig sinnlos Positionen berechnet werden. Zeig uns den Code.

Jetzt schauen wir uns mal Deine Add-Funktionen an:

Dein Original:

var Ergebnis = 0;
function Add1() {
  Ergebnis = Ergebnis + 1;
  document.getElementById("AUSGABE2").innerHTML = Ergebnis;
  var max = 1;
}
function Add2() {
  Ergebnis = Ergebnis + 1;
  document.getElementById("AUSGABE3").innerHTML = Ergebnis;
}

function Add3() {
 Ergebnis = Ergebnis + 1;
 document.getElementById("AUSGABE1").innerHTML = Ergebnis;
}

Hm. Sehr ungünstig gelöst. Der Mensch ist Mensch weil er faul ist (deshalb denkt er nach wie er einfacher bzw. schneller, am besten schlafend an sein Essen kommt und spart Kalorien gerne auch beim Nachdenken...) und sich nicht das Gehirn mit derartig sinnfrei überkreuzten Zusammenhängen ( Add1->AUSGABE2 / Add2->AUSGABE3 / Add3->AUSGABE1) zermartern will.

<script>
// Zunächst mal 3 Ergebnisse als Array //
var Treffer = new Array(0,0,0)
// Der beginnt immer mit 0 zu zählen, was sich gleich zeigt. //

function AddTreffer(i) {
//erwartet als Parameter eine Treffer-ID:
// 0=Marmor / 1=Stein / 2=Eisen
  Treffer[i]++;
  document.getElementById('Treffer_' + i).innerHTML = Treffer[i];
}
</script>

Natürlich müsstest Du das Feld in "Treffer_1", …, "Treffer_3") umbenennen. Es geht aber noch besser:

<script>
// Zunächst mal global die Treffer als Objekt //
var Treffer = new Object ();
Treffer['Marmor'] = 0;
Treffer['Stein'] = 0;
Treffer['Eisen'] = 0;
// hat also Elemente mit schönen sprechenden Namen. //

function AddTreffer(s) {
//erwartet als Parameter einen Bezeichner //
// Marmor / Stein / Eisen                 //
  Treffer[s]++;
  document.getElementById('Treffer_' + s).innerHTML = Treffer[s];
}
</script>

Natürlich müsstest Du die Ausgabe-Felder in "Treffer_Marmor", …, "Treffer_Eisen" umbenennen.

Das HTML sähe dann unter Weglassen der (soweit ich das am gezeigten Code sehen kann) verzichtbar gewordenen ID so aus:

<img onclick="AddTreffer('Marmor'); this.style.display='none';" src="Marmor.png">
…
<img onclick="AddTreffer('Eisen'); this.style.display='none';" src="Eisen.png">

Ach so: Es ist damit nicht alles "beim Besten". Das werden Dir aber andere aufschreiben.

Jörg Reinholz

Beitrag melden

– Informationen zu den Bewertungsregeln

Problem: Javascript nur einmal durchlaufen lassen?
Gunnar Bittersmann Homepage des Autors 20.12.2015 09:12

javascript
+1 Informationen zu den Bewertungsregeln
@@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 🖖

--
„Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
„Hat auf dem Forum herumgelungert …“
(Wachen in Asterix 36: Der Papyrus des Cäsar)
Beitrag melden

+1
Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

ferdiseen: Problem: Javascript nur einmal durchlaufen lassen?

Problem: Javascript nur einmal durchlaufen lassen?

Problem: Javascript nur einmal durchlaufen lassen?

Problem: Javascript nur einmal durchlaufen lassen?

Problem: Javascript nur einmal durchlaufen lassen?

Problem: Javascript nur einmal durchlaufen lassen?

Problem: Javascript nur einmal durchlaufen lassen?