Forum PHP.pl > Przypisanie zdarzenia onClick do input

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Przypisanie zdarzenia onClick do input

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

serek

15.06.2011, 17:46:19

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?

kamil4u

15.06.2011, 17:48:49

A jak próbowałeś?

serek

15.06.2011, 18:30:39

Różnie

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ę

kamil4u

15.06.2011, 18:36:19

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

15.06.2011, 18:57:36

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...

kamil4u

15.06.2011, 19:11:05

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

Cytat

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

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

15.06.2011, 19:40:39

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

15.06.2011, 20:07:44

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

15.06.2011, 20:39:02

Nom racja zapomniałem o takim sposobie, a sam go używam

Coś nie działa, pewnie znowu o czymś zapomniałem

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

15.06.2011, 20:56:02

Stary problem...

Kod

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

serek

15.06.2011, 20:59:07

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.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.