ugrás a tartalomhoz

JavaScript eseménykezelés for ciklussal

Mistic97 · 2015. Aug. 11. (K), 16.19
JavaScriptben akarok egy olyan függvényt létrehozni, aminek pár paraméter átadásával létrehozhatok több div taget és ezekre a tagekre kattintgatva küldök a szervernek adatokat. Utóbbi remekül működik, egy kis szépséghiba, hogy ha for ciklussal próbálom megoldani, hogy x számú nyomógombom legyen, akkor csak az utolsó gomb kapja meg az eseményeket. Miért?

A kód:
function createQuestion(main_div_name, question_text, answer_div_name, answer_div_text, post_to, post_name, post_value){
					main_div = document.createElement("div");
					main_div.id = main_div_name;
					document.getElementById("container_div").appendChild(main_div);
					
					question_h1 = document.createElement("h1");
					question_h1.id = "question_" + main_div_name;
					document.getElementById(main_div_name).appendChild(question_h1);
					document.getElementById("question_" + main_div_name).innerHTML = question_text;
					document.getElementById("question_" + main_div_name).style.margin = 0;
					document.getElementById("question_" + main_div_name).style.color = "#F6F6E8";
					document.getElementById("question_" + main_div_name).style.paddingTop = "100px";
					
					var answer_div_name_array = answer_div_name.split("|");
					var answer_div_name_array_length = answer_div_name_array.length;
					var answer_div_text_array = answer_div_text.split("|");
					
					for(i = 0; i < answer_div_name_array_length; i++){						
						var onmouseTest = answer_div_name_array[i];
					
						answer = document.createElement("div");
						answer.id = answer_div_name_array[i];
						document.getElementById(main_div_name).appendChild(answer);
						part_of_body_height = body_height/3.5;					
						document.getElementById(answer_div_name_array[i]).style.width = "200px";
						document.getElementById(answer_div_name_array[i]).style.background = "#D43F3F";
						document.getElementById(answer_div_name_array[i]).style.color = "#F6F6E8";
						document.getElementById(answer_div_name_array[i]).style.fontSize = "20px";
						document.getElementById(answer_div_name_array[i]).style.display = "inline-block";
						document.getElementById(answer_div_name_array[i]).style.margin = "10px";
						document.getElementById(answer_div_name_array[i]).style.marginTop = part_of_body_height + "px";
						document.getElementById(answer_div_name_array[i]).style.padding = "30px 0 30px 0";
						document.getElementById(answer_div_name_array[i]).innerHTML = answer_div_text_array[i];					
						
						document.getElementById(onmouseTest).onmouseover = function(){
							console.log("DIV NEVE: " + onmouseTest);
							console.log("DIV ÉRTÉKE: " + answer_div_text_array[i]);
							document.getElementById(onmouseTest).style.background = "#00ACE9";
							document.getElementById(onmouseTest).style.cursor = "pointer";							
						};
						document.getElementById(onmouseTest).onmouseout = function(){
							if(document.getElementById(onmouseTest)){
								document.getElementById(onmouseTest).style.background = "#D43F3F";
							}
						};	
					}
				}
				createQuestion("test_question", "I ask something", "answer_1|answer_2", "First answer|Second answer");
‹ jQuery -> JavaScript jquery scroll probléma ›
 ■
1

Closure

Poetro · 2015. Aug. 11. (K), 16.42
Ajánlom figyelmedbe a JavaScript függvények cikkem Closure (lexikai zárvány) fejezetét. A probléma amivel szembesülsz:
A fenti kis program 5 függvényt pakol bele a foo nevű tömbbe. A függvény visszaadja az i értékét. Ezután végigmegyünk fordított sorrendben a tömb elemein, és kiíratjuk a függvény futásának eredményét a konzolra. És egyesek meglepetésére minden esetben a konzolra az 5 íródik ki. Miért? Azért mert a függvényünk a zárványt használva hozzáfér az i értékéhez, és az első for ciklus futása után i értéke 5.

Egyébként nem csak az utolsó gombod kapja meg az eseményeket. Mindegyik megkapja, csak mindegyik ugyanazt fogja kiírni, mivel i értéke az esemény kiváltásakor az utolsó érték lesz, amit i felvett (amikor a ciklus végetért).