Javascript funktioniert nicht richtig [gelöst]

Hallo,

da bin ich wieder mit dem nächsten Problem.
Ich habe jetzt endlich ein Script für meinen Lottoschein, welches die Checkboxen durch Bilder ersetzt, gefunden.
Source
Das Script habe ich ein bischen umgeschrieben, so dass es eben 49 verschiedene Bilder für die entsprechenden Checkboxen anzeigt:

[code]// JavaScript Document
//global variables that can be used by ALL the function son this page.
var inputs;
var Zahlen = new Array(“Images/Lottozahlen/1.png”,
“Images/Lottozahlen/2.png”,
“Images/Lottozahlen/3.png”,
“Images/Lottozahlen/4.png”,
[…]
[…]
“Images/Lottozahlen/48.png”,
“Images/Lottozahlen/49.png”)

var imgTrue = ‘Images/Lottozahlen/Kreuz.png’;

//this function runs when the page is loaded, put all your other onload stuff in here too.
function init() {
replaceChecks();
}

function replaceChecks() {

//get all the input fields on the page 
inputs = document.getElementsByTagName('input'); 

//cycle trough the input fields 
for(var i=0; i < inputs.length; i++) { 

    //check if the input is a checkbox 
    if(inputs[i].getAttribute('type') == 'checkbox') {
		
		for(var x=1; x < 50; x++) {
			if(inputs[i].getAttribute('value') == x || inputs[i].getAttribute('value') == x+49 || inputs[i].getAttribute('value') == x+49+49 || inputs[i].getAttribute('value') == x+49+49+49 || inputs[i].getAttribute('value') == x+49+49+49+49 || inputs[i].getAttribute('value') == x+49+49+49+49+49) {
				//create a new image 
				var img = document.createElement('img'); 
         
        		//check if the checkbox is checked 
        		if(inputs[i].checked) { 
            		img.src = imgTrue; 
        		} else { 
            		img.src = Zahlen[x-1]; 
        		}
				//set image ID and onclick action 
        		img.id = 'checkImage'+i; 
        		//set image 
        		img.onclick = new Function('checkChange('+i+')'); 
        		//place image in front of the checkbox 
        		inputs[i].parentNode.insertBefore(img, inputs[i]); 
         	
        		//hide the checkbox 
        		inputs[i].style.display='none';
			}
		}
	}
} 

}

//change the checkbox status and the replacement image
function checkChange(i) {

if(inputs[i].checked) { 
    inputs[i].checked = ''; 
	if(i < 49) {
		document.getElementById('checkImage'+i).src=Zahlen[i];
	}
	if(i>48 && i <98) {
		document.getElementById('checkImage'+i).src=Zahlen[i-50];
	}
	if(i>97 && i <147) {
		document.getElementById('checkImage'+i).src=Zahlen[i-100];
	}
	if(i>146 && i <196) {
		document.getElementById('checkImage'+i).src=Zahlen[i-150];
	}
	if(i>195 && i <245) {
		document.getElementById('checkImage'+i).src=Zahlen[i-200];
	}
	if(i>244) {
		document.getElementById('checkImage'+i).src=Zahlen[i-250];
	}
} else { 
    inputs[i].checked = 'checked'; 
    document.getElementById('checkImage'+i).src=imgTrue; 
} 

}

window.onload = init;
/////////////////
/// Script von http://brainerror.net/scripts/javascript/checkbox/
/////////////////[/code]
Im letzten Abschnitt wird ja immer die ID der Checkbox abgefragt und soll dann dementsprechend das Ausgangsbild anzeigen.
Weil ich die 49 Checkboxen 6mal auf dem Formular habe, muss ich immer 50 (bzw. 100., …) von der ID abziehen um den richtigen Index für das Zahlen[] Array zu bekommen.
Im ersten zahlenfeld auf dem Formular klappt das auch, nur bei jedem nächsten wird es dann jedes mal eine Zahl mehr (von der letzten aus), wo angeblich kein Bild definiert ist.

Siehe Mein Lottoschein (klickt auf alle 49, 48, 47, …) (Script ist gerade so geschrieben, wie es hier steht)

Ich habe schon alles mögliche im letzten Codeabschnitt geändert, jedesmal wurden entweder die Zahlen verschoben oder die letzten Zahlen wurden nicht mehr angezeigt.

Ich hoffe, einer von euch kann mir das erklären bzw. helfen?!
Gruß!
Maddin

Wirklich - musst du 50, 100, … abziehen?

Natürlich, weil du zu viel abziehst.

Das ganze Script ist mega-umständlich geschrieben.

Wozu das riesen Array am Anfang? Du hast 49 Bildadressen, die sich jeweils nur durch eine Zahl unterscheiden.
Wenn jetzt auf eine Checkbox mit der Zahl 33 geklickt wird, du also den Wert 33 in deinem Script in einer Variablen vorliegen hast - dann schlägst du jetzt im Array die Bildadresse nach, um den Textstring “Images/Lottozahlen/33.png” zu erhalten.
Wie wär’s, wenn du einfach das Array weglässt - und dir die benötigte Bildadresse aus “Images/Lottozahlen/”+zahl+".png" zusammenbaust …?

Und auch die mehrfachen If-Abfragen in checkChange, um irgendwas von i abzuziehen, sind ziemlich überflüssig. Wie man das intelligenter gestalten könnte, überlege bitte mal selber, und teile uns dann mit, worauf du gekommen bist.

Hey,

danke für den Tipp mit dem “Images/Lottozahlen/”+zahl+".png"! ich hab bis gestern noch nie ein Javascript geschrieben… desswegen habe ich das auch mit diesem riesen Array gemacht :wink:

Und wegen dem “zu viel Abziehen”: Wennn ich nur 49 abziehe, hat zwar jede Checkbox auf dem Zahlenfeld ein Bild, aber im 2. Feld hat die Checkbox, die eigentlich eine 49 nach zweimailigem klick wieder anzeigen soll, eine 48. Im 3. Feld sind dann alle Bilder (nach zweimailgem Klick) um ein Feld nach vorne verschoben, sprich 1 wird zur 2, 2 wird zur 3 usw.

Ich werde das Script jetzt mal ohne diesem riese Array schreiben und wieder nur 49 abziehen.
Resultat ist dann unter dem gleichen Link wie oben anzusehen.

Edit:
Habs jetzt endlich hinbekommen… die IDs werden irgendwie unlogisch vergeben:
Feld 1:
ID 0-48
Feld 2:
ID 50-98
Feld 3:
ID 100-148
usw.
zwischen jedem Feld fällt immer eine ID weg (warum auch immer)
Neues Script:

[code][…]
if(inputs[i].checked) {
img.src = imgTrue;
} else {
img.src = “Images/Lottozahlen/”+x+".png";
}
[…]

//change the checkbox status and the replacement image
function checkChange(i) {

if(inputs[i].checked) { 
    inputs[i].checked = ''; 
	if(i < 49) {
		var Zahl = i+1
		document.getElementById('checkImage'+i).src="Images/Lottozahlen/"+Zahl+".png";
	}
	if(i>49 && i <99) {
		var Zahl = i-49;
		document.getElementById('checkImage'+i).src="Images/Lottozahlen/"+Zahl+".png";
	}
	if(i>99 && i <149) {
		var Zahl = i-99;
		document.getElementById('checkImage'+i).src="Images/Lottozahlen/"+Zahl+".png";
	}
	if(i>149 && i <199) {
		var Zahl = i-149;
		document.getElementById('checkImage'+i).src="Images/Lottozahlen/"+Zahl+".png";
	}
	if(i>199 && i <249) {
		var Zahl = i-199;
		document.getElementById('checkImage'+i).src="Images/Lottozahlen/"+Zahl+".png";
	}
	if(i>249) {
		var Zahl = i-249;
		document.getElementById('checkImage'+i).src="Images/Lottozahlen/"+Zahl+".png";
	}
} else { 
    inputs[i].checked = 'checked'; 
    document.getElementById('checkImage'+i).src=imgTrue; 
} 

}

window.onload = init;
/////////////////
/// Script von http://brainerror.net/scripts/javascript/checkbox/
/////////////////[/code]

[quote=“ma-maddin”]die IDs werden irgendwie unlogisch vergeben:
Feld 1:
ID 0-48
Feld 2:
ID 50-98
Feld 3:
ID 100-148
usw.
zwischen jedem Feld fällt immer eine ID weg (warum auch immer)[/quote]
Ganz logisch: Weil du alle Inputfelder im Formular durchläufst, auch die Resetbuttons.
Die ignorierst du dann innerhalb der for-Schleife zwar per if-Abfrage - aber der Zähler der for-Schleife wird trotzdem jedes Mal um eins erhöht, auch wenn du mit dem aktuellen Inputfeld nichts machst.

Darauf, diesen Zähler beim Aufruf von replaceChecks mit zu geben, könntest du komplett verzichten, wenn du einfach eine andere “Verbindung” zwischen Checkboxen und Bildern herstellst. Dann kannst du die nötige “Zahl” nämlich einfach aus dem value der Checkbox auslesen, und müsstest gar nicht mehr 50, 100, oder sonstwas abziehen.

Wenn du die Bilder immer direkt vor den Checkboxen ins Dokument eingehängt hast - dann könntest du vom Bild aus einfach über die Eigenschaft nextSibling auf die zugehörige Checkbox zugreifen. (Wenn die HTML-Struktur komplexer wäre, dann könnte man auch bei der Initialisierung eine Referenz auf die zugehörige Checkbox in einer Eigenschaft des Bildobjektes speichern.)

Dann bräuchtest du auch nicht mehr jedes mal mit new Function ein neues Funktionsobjekt erzeugen - sondern könntest einfach mit img.onclick = checkChange; die Handlerfunktion zuweisen. (Die dann nicht mehr die Nummer als Parameter übergeben bekommt, sondern einfach über this auf das Element zugreift, auf dem der Event stattfand.)

Ähm… ja ^^ klingt gut, was du da sagst, is aber für den Anfänger in Javascript, wie mich, irgendwie kompliziert :wink:

Funktionieren tuts ja soweit, deswegen lass ich das auch erstmal so.

Hab jetzt aber noch so eine Art Resetfunktion mit JavaScript versucht zu schreiben, die hatte auch mal (in Opera) funktioniert:

function ResetFeld(i) { var Nummer = 1; var start = i*50-50; for(var y=start; y < start+49; y++) { inputs[y].checked = ''; document.getElementById('checkImage'+y).src="Images/Lottozahlen/"+Nummer+".png"; /// Line 60 Nummer = Nummer+1; } }
Im IE ging die net und im Opera jetzt auch nich mehr. Fehlermeldung aus der Console:

[quote]message: Statement on line 60: Cannot convert undefined or null to Object
stacktrace: n/a; see opera:config#UserPrefs|Exceptions Have Stacktrace
[/quote]

Die Funktion rufe ich im Formular wie folgt auf:

Die Zahl in Klammern übermittelt die Feldnummer, damit die Funktion weiß, welche Images und Checkboxen zurückgesetzt werden sollen.

Kann mir da bitte jemand helfen?
In Javascript blicke ich halt noch nicht richtig durch :wink:

Vielen Dank schonmal!

Hi, nimm mal diese zeile in deine schleife (ganz oben):

bzw. wenn das nich funktioniert:

mfg Joey

Geht damit auch nicht.
Code sieht so aus:

function ResetFeld(i) { var Nummer = 1; var start = i*50-50; for(var y=start; y < start+49; y++) { if(typeof document.getElementById('checkImage'+y) != "object") continue; inputs[y].checked = ''; document.getElementById('checkImage'+y).src="Images/Lottozahlen/"+Nummer+".png"; Nummer = Nummer+1; } }

Fehlerbericht aus dem IE:

[quote]Details zum Fehler auf der Webseite

Benutzer-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2)
Zeitstempel: Wed, 21 Oct 2009 13:13:19 UTC

Meldung: ‘document.getElementById(…)’ ist Null oder kein Objekt
Zeile: 61
Zeichen: 3
Code: 0
URI: earthlostlotto.bplaced.net/filem … heckbox.js[/quote]

Vermutlich stimmt die Berechnung deines Index wieder nicht.

Jop, jetzt wo dus sagt, merk ich, dass alle zahlen wieder um eins verschoben sind
:smiley: :wink2: