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:
  1. function createQuestion(main_div_name, question_text, answer_div_name, answer_div_text, post_to, post_name, post_value){  
  2.                     main_div = document.createElement("div");  
  3.                     main_div.id = main_div_name;  
  4.                     document.getElementById("container_div").appendChild(main_div);  
  5.                       
  6.                     question_h1 = document.createElement("h1");  
  7.                     question_h1.id = "question_" + main_div_name;  
  8.                     document.getElementById(main_div_name).appendChild(question_h1);  
  9.                     document.getElementById("question_" + main_div_name).innerHTML = question_text;  
  10.                     document.getElementById("question_" + main_div_name).style.margin = 0;  
  11.                     document.getElementById("question_" + main_div_name).style.color = "#F6F6E8";  
  12.                     document.getElementById("question_" + main_div_name).style.paddingTop = "100px";  
  13.                       
  14.                     var answer_div_name_array = answer_div_name.split("|");  
  15.                     var answer_div_name_array_length = answer_div_name_array.length;  
  16.                     var answer_div_text_array = answer_div_text.split("|");  
  17.                       
  18.                     for(i = 0; i < answer_div_name_array_length; i++){                         
  19.                         var onmouseTest = answer_div_name_array[i];  
  20.                       
  21.                         answer = document.createElement("div");  
  22.                         answer.id = answer_div_name_array[i];  
  23.                         document.getElementById(main_div_name).appendChild(answer);  
  24.                         part_of_body_height = body_height/3.5;                    
  25.                         document.getElementById(answer_div_name_array[i]).style.width = "200px";  
  26.                         document.getElementById(answer_div_name_array[i]).style.background = "#D43F3F";  
  27.                         document.getElementById(answer_div_name_array[i]).style.color = "#F6F6E8";  
  28.                         document.getElementById(answer_div_name_array[i]).style.fontSize = "20px";  
  29.                         document.getElementById(answer_div_name_array[i]).style.display = "inline-block";  
  30.                         document.getElementById(answer_div_name_array[i]).style.margin = "10px";  
  31.                         document.getElementById(answer_div_name_array[i]).style.marginTop = part_of_body_height + "px";  
  32.                         document.getElementById(answer_div_name_array[i]).style.padding = "30px 0 30px 0";  
  33.                         document.getElementById(answer_div_name_array[i]).innerHTML = answer_div_text_array[i];                   
  34.                           
  35.                         document.getElementById(onmouseTest).onmouseover = function(){  
  36.                             console.log("DIV NEVE: " + onmouseTest);  
  37.                             console.log("DIV ÉRTÉKE: " + answer_div_text_array[i]);  
  38.                             document.getElementById(onmouseTest).style.background = "#00ACE9";  
  39.                             document.getElementById(onmouseTest).style.cursor = "pointer";                            
  40.                         };  
  41.                         document.getElementById(onmouseTest).onmouseout = function(){  
  42.                             if(document.getElementById(onmouseTest)){  
  43.                                 document.getElementById(onmouseTest).style.background = "#D43F3F";  
  44.                             }  
  45.                         };    
  46.                     }  
  47.                 }  
  48.                 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).