Przypisanie zdarzenia onClick do input Opcje

[serek]

Mam takie coś:

Kod

for (i=1;i<=9;i++)
{
    document.getElementById('form_ukladanka').innerHTML+='<input type="button" class="ukladanka_kratka" value="" style="width:160px; height:123px; background-color: #0f0f0f; border:0mm;" onFocus="blur(this)">';
    document.getElementsByTagName('input')[i+3].id='cba_'+i;
    document.getElementsByTagName('input')[i+3].name='kratka2_'+i;
}

W innerHTML nie mogę jako id/name ustawić tekstu razem ze zmienną, wiec muszę to robić osobno. Mam taki sam problem z zdarzeniem onClick. Chcę je przypisać do każdego z inputów i ma ono mieć w sobie zmienną "i" z pętli for, coś w stylu 'uloz_'+i. Tylko, że jak to przypisać do każdego z pól input, by funkcja wpisana w onClick zadziałała dopiero po kliknięciu na właściwy jej input, a nie od razu?

Ten post edytował serek 15.06.2011, 17:47:38

[kamil4u]

A jak próbowałeś?

[serek]

Różnie (IMG:style_emoticons/default/haha.gif)
z:
document.getElementsByTagName('input')[i+3].onclick
document.getElementsByTagName('input')[i+3].addEvent
document.getElementsByTagName('input')[i+3].addEventListener

I nic, może źle to stosuję (IMG:style_emoticons/default/haha.gif)

[kamil4u]

Pokaż jak próbowałeś z onclick.

W razie czego masz małą podpowiedź:

Kod

<input id="1">
<input id="2">
<input id="3">
<input id="4">
<input id="5">
<input id="6">

<script>
els = document.getElementsByTagName('input');
for(i=0; i<6; i++){
   els[i].onclick = function(){
     alert(this.id);
   }
}
</script>

[serek]

Ehh.. a ja ciągle robiłem coś w stylu:

Kod

document.getElementsByTagName('input')[i+3].onclick=nazwa_funkcji();

Czyli powinienem zrobić tak:

Kod

for (i=1;i<=9;i++)
{
    document.getElementsByTagName('input')[i+3].onclick=function(){
    nazwa_funkcji();
    };
}

Tylko jak zapisać tą nazwę funkcji by zadziałała? Nazwa to uloz2_x, gdzie x to cyferka z pętli...

Ten post edytował serek 15.06.2011, 19:06:49

[kamil4u]

Zrób to inaczej...
nazwa_funkcji( argument ), a nie tak jak Ty -> nazwa_funkcji_argument();

Ehh.. a ja ciągle robiłem coś w stylu:
Kod
document.getElementsByTagName('input')[i+3].onclick=nazwa_funkcji();


Czyli powinienem zrobić tak:

I tak i nie (IMG:style_emoticons/default/smile.gif)

Kod

el.onclick = nazwa_funkcji;
//albo
el.onclick = function(){ nazwa_funkcji(); }

Pierwszy sposób( bez "()" ) stosujesz, gdy funkcja nie przyjmuje argumentów, 2 gdy funkcja przyjmuje argumenty.
2 sposób to tzn. tworzenie funkcji anonimowej

Powodzenia

[serek]

No dobra, ale ja mam rozpisane dla każdego inputa inną funkcję: uloz2_1, uloz2_2, uloz2_3,...,uloz2_9. A ten sposób z argumentem byłby chyba tylko dobry, jeśli miałbym 1 funkcję z zadaniami dla każdego z input'ów. Czy się mylę?

[kamil4u]

Mylisz się:

Kod

function test(x){
switch(x){
  case '1':
   break;

  case '2':
   break;
}
}

Ew. da się wywołać te Twoje funkcje w taki sposób: window['nazwa_funkcji_'+i](); ,ale to nie jest polecane.

[serek]

Nom racja zapomniałem o takim sposobie, a sam go używam (IMG:style_emoticons/default/haha.gif)

Coś nie działa, pewnie znowu o czymś zapomniałem (IMG:style_emoticons/default/haha.gif)

Podstawiam do każdego inputa takie coś:

Kod

for (i=1;i<=9;i++)
{        
    document.getElementsByTagName('input')[i+3].onclick=function(){uloz2(i);};
}

I mam switch'a z alertami dla sprawdzenia czy jest ok:

Kod

function uloz2(x)
{
    switch(x)
    {
            case 1:
            alert(x);
            break;

            case 2:
            alert(x);
            break;
       }
}

Ale coś nie działa, bo się alert nie wyświetla.

[kamil4u]

Stary problem...

Kod

document.getElementsByTagName('input')[i+3].onclick= function(i){ return function(){ uloz2(i); }}(i);

[serek]

Nadal nic.

EDIT: Ostatnia funkcja nr 9 wywołuje alert, reszta cicho siedzi... Tak samo z powyższym sposobem jak i z samym onclick=function(){ uloz2(i); };

Wymazuje z pamięci poprzednie funkcje chyba.

EDIT2: DZIAŁA!! Jak dodawanie tej funkcji jest w tej samej pętli for co innerHTML z tworzeniem inputów (więć stworzy się jeden input, doda się do niego funkcja, drugi input, funkcja, itd.), to tylko ostatni input nr 9 wywołuje funkcję z alertem, który wyświetla atrybut o wartości 9 równym temu inputowi. Jeśli dam to w osobnej pętli poniżej pętli z innerHTML, więc dodawanie funkcji zacznie się już po wygenerowaniu inputów, razem z rozwiązaniem z Twojego powyższego postu to każdy input wyświetla już swój własny alert.


Wielkie dzięki za pomoc.

Ten post edytował serek 15.06.2011, 21:34:41