[JS] "Bildwechsel" mit innerHTML

[d3221]

Hey der JS-Noob mal wieder

Ich habe bis jetzt folgenden Code:

    <script type="text/javascript">
	function changeIcon_<?php echo $project->id; ?>(){
	var newHTML = "<img src=\"Bilder/icons/minimize.png\" alt=\"Minimieren\">";
	var oldHTML = "<img src=\"Bilder/icons/chart.png\" alt=\"Balkendiagramm\">";
	var i = 1;
		if (i == 2) {
			document.getElementById('projektlink_<?php echo $project->id; ?>_close').innerHTML = oldHTML;
			document.getElementById('test').innerHTML = i;
			i--;			
		}

		if (i == 1) {
			document.getElementById('projektlink_<?php echo $project->id; ?>_close').innerHTML = newHTML;
			document.getElementById('test').innerHTML = i;
			i++;			
		}
}
</script>

Ich will eben, dass beim 1. Klick auf einen Div sich das bild in "minimize.png" ändert und beim 2. Klick wieder auf das Ausgangsbild "chart.png" aber das will irgendwie nicht funnktionieren mit den ganzen Variablen

1. Erfolg -> Beim ersten Klick wechselt das Bild zu "minimize.png". Aber wenn ich dann nochmal drauf klicken will es nicht zurückwechseln auf Chart.png Kann mir da jemand helfen??

Danke schon einmal

 

[Syrakos]

AW: [JS] "Bildwechsel" mit innerHTML

Du setzt die Variable i ja auch beim Funktionsaufruf immer auf 1.

Wenn dann musst Du diese ausserhalb der Funktion deklarieren.

 

[d3221]

AW: [JS] "Bildwechsel" mit innerHTML

Hm.. hab jetzt

   <script type="text/javascript">
	var i = 1;
	function changeIcon_<?php echo $project->id; ?>() [...]

Aber das bringt auch keine Veränderung :/

 

[Duddle]

AW: [JS] "Bildwechsel" mit innerHTML

Problem erkannt, Problem gebannt:
Nachdem du im ersten if-Block i-- ausführst, ist i gleich 1. Da aber die Funktion weiter ausgeführt wird, wird die folgende if-Abfrage ebenfalls wahr, also geht es in den zweiten if-Block und führt die Anweisungen aus. Deshalb erscheint es, als ob nix passiert. Du musst also beide if-Blöcke jeweils mit einem "return;" abschliessen:

			if (i == 2) {
				console.log("if i=2"+i);
				document.getElementById('projektlink_1_close').innerHTML = oldHTML;
				document.getElementById('test').innerHTML = i;
				i--;			
				return;
			}

			if (i == 1) {
				console.log("if i=1"+i);
				document.getElementById('projektlink_1_close').innerHTML = newHTML;
				document.getElementById('test').innerHTML = i;
				i++;			
				return;
			}

Duddle

 

[d3221]

AW: [JS] "Bildwechsel" mit innerHTML

Hammer hart Klappt... *sprachlos* Und return; sagt praktisch "Geh an den Anfang und halte da an!"? oder wie ist das zu interpretieren?

 

[Duddle]

AW: [JS] "Bildwechsel" mit innerHTML

"return" steht in der Regel für "gib zurück".
Normalerweise ist der Zweck von Funktionen, kleine und sicher wiederholende Teile eines Algorithmus auszulagern, damit man etwas nur einmal schreiben muss. Die Funktion gibt dann in der Regel ein Ergebnis zurück, mit dem man im Hauptteil des Programms weiterarbeiten kann (einfaches Beispiel: Summations-Funktion, oder Maximum-Funktion über eine Liste von Zahlen) und genau das macht die Anweisung "return". Ultra-Simpel-Veranschaulichungs-Beispiel:

//Pseudo-Code, auf keine bestimmte Programmiersprache bezogen
function addieren(a, b) {
  var summe = a+b;
  return summe;
}

print "Die Summe von 55 und 79 ist" . addieren(55,79);

In deinem Beispiel aber gibt die Funktion schlichtweg nichts zurück, also kannst du es gleichsetzen mit "brich ab" (denn sobald eine Funktion fertig ist, weil sie etwas zurück gegeben hat, bricht sie ab).


Duddle