Jak prawidłowo powiązać funkcję js z onclick a jednocześnie stworzyć "jednoklikalny" przycisk

pytanie zadane 17 kwietnia 2015 w JavaScript przez Łukasz Kasza Początkujący (460 p.)

Jak w temacie, próbuję to rozgryźć od 3 godzin...

Mam na stronie buttonik:

Po kliknięciu ładnie wyświetla się stworzona przeze mnie funkcja random_imglink();

Z tym, że przycisk da się kilknąć ponownie, co znowu wywołuje tą funkcję i tak w kółko, a sensem jest jednorazowe losowanie.

Doszedłem do tego, że jeżeli w onclicku ustalę: button1.disabled=true;return true;

to wtedy przycisk stanie się poprawnie "jednoklikalny".

Tu dochodzimy do sedna - nie umiem zrobić JEDNOCZEŚNIE żeby był on jednoklikalny i wywoływał funkcję, ponieważ tylko co, co wpiszę pierwsze w onclick poprawnie się dzieje, czyli albo odwołanie do funkcji random_imglink, albo polecenie button1.disabled=true;return true.

Czy ktoś z Was może mi poradzić, jak połączyć obie funkcjonalności w jedno, tak aby zrobić przycisk "jednoklikalny", który poprawnie wywołuje javascriptową funkcję losującą?

Pozdrawiam,

Łukasz

2 odpowiedzi

odpowiedź 17 kwietnia 2015 przez nefil1m Stary wyjadacz (10,690 p.)

A nie możesz dać:

document.getElementById('button1').disabled = true;

na końcu funkcji random_imglink() ?

komentarz 18 kwietnia 2015 przez Łukasz Kasza Początkujący (460 p.)

Dodałem na końcu funkcji wskazany element i nie działa nadal :(. Moja funkcja wygląda obecnie tak:

function random_imglink(){
                var button1 = document.getElementById('button1');
                var myimages=new Array()
                    myimages[1]="xxx"
                    myimages[2]="xxx"
                    myimages[3]="xxx"

                var ry=Math.floor(Math.random()*myimages.length)
                if (ry==0)
                ry=1
                    var div = document.getElementById('wynik_losowania');
                    div.innerHTML = '<img src="'+myimages[ry]+'" border=0>';
                    document.getElementById('wynik_losowania').appendChild(div);
                    document.getElementById('button1').disabled = true;
                }

podczas gdy button zaprogramowany jest tak:

<input type="button" name='button1' id='button1' onclick="random_imglink();" value='Losuj przeciwnika!'>

komentarz 18 kwietnia 2015 przez nefil1m Stary wyjadacz (10,690 p.)

http://jsfiddle.net/6vdju51s/1/

Trochę mi zajęło dojście do tego jak to miało wyglądać. Ten if bez klamer mylący :P
Kilka uwag:

document.getElementById('wynik_losowania').appendChild(div); <- w tym miejscu próbujesz 'włożyć' diva w niego samego
tablicę deklaruj raczej jako [] bo szkoda tyle pisać (tak jak w fiddle'u)
Twój button się nie blokował bo był inputem
jak pobierasz diva do zmiennej to z niej później korzystaj. Nie ma sensu zapisywać do zmienniej a później pobierać jeszcze raz.

No i oczywiście możesz sobie z powrotem onclicka przypisać w html ale na fiddle'u był jakiś problem i mi pluł undefined

Mam nadzieję, że tym razem zadziała ;)

komentarz 18 kwietnia 2015 przez nefil1m Stary wyjadacz (10,690 p.)

Aha no i jeszcze zamiast zostawiać pierwsze pole tablicy puste i robić if-a lepiej zorbić:

var ry = Math.floor(Math.random() * (myimages.length - 1))

komentarz 19 kwietnia 2015 przez Łukasz Kasza Początkujący (460 p.)

Bardzo chciałbym, żeby to działało, bo pewnie włożyłeś w to sporo pracy, ale niestety dalej leży - o ile w mojej wersji losuje mi chociaż obrazki, ale przycisk jest "wieloklikalny", to w tej wersji zarówno przycisk jest wielkoklikalny, jak i obrazki się nie pojawiają (oczywiście zastępuję te xxx i yyy właściwymi ścieżkami).

Wychwyciłem w fiddlu błąd polegający na określeniu buton1.disabled zamiast button1.disabled, ale to dalej nie to...

komentarz 19 kwietnia 2015 przez Łukasz Kasza Początkujący (460 p.)

Ostatecznie stworzyłem, dzięki Waszej pomocy, poprawną funkcję. Oto ona:

function random_imglink(){

                var button1 = document.getElementById('button1');
                    button1.disabled = true;
                var myimages=new Array()

                    myimages[1]="xxx"

   myimages[2]="xxx"
                    myimages[3]="xxx"

                var ry=Math.floor(Math.random()*myimages.length)

                if (ry == 0)
        ry=1
        var div = document.getElementById('wynik_losowania');
        div.innerHTML = '<img src="'+myimages[ry]+'" border=0>';





            }