check mit javascript bleibt nicht auf true

[Filos92]

Hallo liebe Selfhtml-Community. Ich bin neu hier und auch generell etwas unerfahren, deswegen verzeiht mir bitte wenn ich hier etwas falsch Poste. Ich habe anscheinend ein Element in javascript falsch verstanden, aber hier erstmal mein Problemcode:

function ja() {
	if (feld == 0 ) {
		document.getElementById("dynamisch").innerHTML +=
		"<p><label>Wollen sie eine alternative (nicht instituts adresse)verwenden?: <input type='checkbox' id=\"yes1\"; onclick=\"notify1();\"></label></p> <div id=\"dyn_mail\"></div><p> <label>Benachrichtigung per SMS? <input type='checkbox' id=\"yes2\"; onclick=\"notify2();\"></label></p><div id=\"dyn_sms\"></div> <br><br><br><span style=\"font-weight:bold;\"> Which Instrument you want to notify </span>" ;
		feld = 1;
				
		instrument_num=notify_ar[2].split(",");
		for (var i = 1; i < menge; i++) {
			document.getElementById("dynamisch").innerHTML +=
			"<p> Instrument: " + daten[i] + ": <input type='checkbox' id='instrument_" + i + "'></p>";
			for (var j=0; j<menge; j++){
				if(i==instrument_num[j]){
					alert("HALLO");
				document.getElementById("instrument_"+i ).checked = true;
				}
			}
		}


	}
	if(document.getElementById('yes').checked) {
		document.getElementById('no').checked = false;
	}

	for (var j = 0; j < 2; j++){
		i=j+1;
		if (notify_ar[j] !== 'undefinied'){
			document.getElementById("yes"+i ).checked = true;
		}
	}

}

Ich weiß, das ist nur eine Funktion und von alleine nicht ausführbar, aber ich hoffe sie reicht fürs Verständnis. Mein Problem ist nun, in der doppelten for-Schleife wird in der ersten Schleife ein Element in HTML eingefügt und in der zweiten wird überprüft, ob die Checkbox bereits einmal vom Nutzer ausgewählt wurde. Ist dies der Fall soll die Checkbox angekreuzt erscheinen. Das Alert habe ich nur eingebaut um die Schritte nachzuverfolgen. Wie ich damit rausgefunden habe, werden auch die richtigen Checkboxen abgehakt, allerdings wird das in der nächsten Iteration auch wieder rückgängig gemacht. Funktioniert: "document.getElementById("instrument_"+i ).checked" anders bzw. was sollte ich verwenden? Ich hoffe ich konnte mich einigermaßen verständlich machen.

[dedlfix]

Tach!

[Problembeschreibung]

Lerne die Entwicklerwerkzeuge deines Browsers kennen. Da gibt es auch einen wunderschönenn Debugger für Javascript. Breakpoint in die Zeile setzen, bis zu der noch alles gut zu sein scheint. Du kannst dann direkt in die Variablen schauen (Maus draufhalten), ohne irgendwelche unnützen alerts einzufügen. Damit lässt sich viel besser Wunsch und Wirklichkeit miteinander vergleichen.

dedlfix.

[Der Martin]

Hallo,

		for (var i = 1; i < menge; i++) {
			document.getElementById("dynamisch").innerHTML +=
			"<p> Instrument: " + daten[i] + ": <input type='checkbox' id='instrument_" + i + "'></p>";
			for (var j=0; j<menge; j++){
				if(i==instrument_num[j]){
					alert("HALLO");
				document.getElementById("instrument_"+i ).checked = true;
				}
			}

Ich weiß, das ist nur eine Funktion und von alleine nicht ausführbar, ...

sie ist vor allem auch sehr unsauber: Sie scheint auf zahlreiche globale Variablen zuzugreifen, die außerhalb ihres eigenen Scopes existieren. Das ist nicht im Sinne von "Kapselung", was einer der Gründe ist, Funktionen zu verwenden.

Wie ich damit rausgefunden habe, werden auch die richtigen Checkboxen abgehakt, allerdings wird das in der nächsten Iteration auch wieder rückgängig gemacht.

Works as designed.

Dein Denkfehler ist die Verwendung von innerHTML in Verbindung mit dem += Operator. Das bedeutet, du liest den momentanen Elementinhalt aus, bekommst ihn als String, hängst an diesen String etwas an, und setzt den Elementinhalt dann komplett neu. Das ist es, was mit += passiert.

Damit erzeugst du aber auch in jedem Schleifendurchlauf wieder neue, jungfräuliche checkbox-Objekte. Auch die, die schon da waren.

Manipulationen, wie du sie vorhast, sollte man besser mit den DOM-Mthoden createElement() und appendChild() oder ähnlichen Techniken machen, und nicht mit innerHTML mit all seinen Nebenwirkungen.

Wieso hast du eigentlich die Tags "datenbank" und "php" dazugewählt, die mit deiner Frage absolut nichts zu tun haben?

So long,
 Martin

[Filos92]

Ohje da gibts ja ganz schön viel zu kritisieren. die Tags hab ich verwendet weil a) sie so vorgeschlagen wurden und b) diese funktion eigentlich nur ein Auszug aus einem php-Script ist welches hauptsächlich mit Datenbanken arbeitet und ich dachte die könnten im Kontext helfen. Entschuldigung Dafür. Ich kenne mich mit javascript noch nicht besonders gut aus. Musste mich neulich erst reinlesen deswegen sind mir diese DOM-Methoden auch noch nicht bekannt. Ich werde das aber jetzt aufjedenfall nachholen :) Vielen Dank aufjedenfall an euch beide. für heute ist mit programmieren schluss aber ich bin mir sicher morgen geht es dank euch weiter :)

[Filos92]

Jetzt hab ich endlich verstanden, was du mit Kapselung meintest :) hab mich ein wenig reingelesen und im nachhinein hast du recht, logik mit oberfläche zu verknüpfen war doof. Ich wusste leider nicht, dass es anders geht. Aber zu dem Zeitpunkt nochmal neuanfangen wäre zu viel Arbeit. die DOM-Methoden waren am ende aber auch etwas unpraktisch. Ich habe mich letzendlich für jquery Objekte entschieden :)