Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [js]Kółko i krzyżyk
Forum PHP.pl > Forum > Przedszkole
Glarden
Robię grę w kółko i krzyżyk. Próbowałem zrobić, żeby po kliknięciu przez użytkownika danego pola, jego zawartość zmieniała się na obrazek z krzyżykiem, ale coś nie działa. Kody wyglądają tak:
fragment (jedno pole) tabelki z 9 polami do gry:
  1. <td class='gra' id='1,1' style='border: 1px solid black;' height='15%' width='10%'><a href="java script: zaznacz(1,1);" onClick="zaznacz(1,1);"><img src='nic.gif'></a></td>

Nie byłem pewien, jak wywołuje się funkcję przez odnośnik, więc użyłem obu sposobów:)
A tutaj funkcja JS:
  1. function zaznacz (pole) {
  2. co = getElementById(pole);
  3. co.innerHTML = "<img src='krzyzyk.gif'>";
  4. }

Po kliknięciu w pole nie ma żadnej reakcji. Gdzie są błędy?
abc667
, oddziela dwa argument w funkcji, nie możesz go używać w ten sposób, np po prostu go usuń, w tym wypadku to wiele nie zmienia

dodatkowo getElementById musisz wykonywać z document.
document.getElementById
Glarden
Racja! Wszystko działa, dzięki. Chodziło o "document.getElementById".

Ale mam kolejny problem. Kontynuowałem w pocie czoła pracę nad grą i napisałem funkcję dodającą kółko sekundę po tym, jak gracz wybierze miejsce na krzyżyk. smile.gif Problem w tym, że skrypt jest jakiś kapryśny i czasem wstawia kółko w losowym miejscu, a czasem nie. Tzn., zdarza się, że po skończonej grze na planszy jest jedno kółko i osiem krzyżyków, zdarza się też, że są cztery kółka i cztery krzyżyki. Oto skrypt:
  1. wolne = new Array();
  2. wolne[0] = '11';
  3. wolne[1] = '12';
  4. wolne[2] = '13';
  5. wolne[3] = '21';
  6. wolne[4] = '22';
  7. wolne[5] = '23';
  8. wolne[6] = '31';
  9. wolne[7] = '32';
  10. wolne[8] = '33';
  11.  
  12. function find_index(t, v){
  13. for(var i=0,n=t.length;i<n;++i)
  14. if(t[i]==v)
  15. return i
  16. return null
  17. }
  18.  
  19. function zaznacz (pole) {
  20. co = document.getElementById(pole);
  21. co.innerHTML = "<img src='krzyzyk.gif'>";
  22. z = find_index(wolne, pole); //znajduje indeks pola o wartości pole
  23. delete (wolne[z]); //kasuje z tablicy 'wolne'
  24. wolne.sort();
  25. s = Math.round(wolne.length*Math.random()); //losowa liczba od 0 do ilości elementów tablicy
  26. ID=setTimeout("zaz_komp (wolne[s]);", 1000); //zaz_komp po sekundzie
  27. }
  28.  
  29. function zaz_komp (pole) {
  30. co = document.getElementById(pole);
  31. co.innerHTML = "<img src='kolko.gif'>";
  32. z = find_index(wolne, pole);
  33. delete (wolne[z]); //usuwa z tablicy 'wolne'
  34. wolne.sort(); //sortuje
  35. }


Wiem, że nadłożyłem kodu pisząc tablicę, ale nie o to teraz chodzi.
abc667
  1. <script type="text/javascript">
  2. wolne = new Array();
  3. wolne[0] = '11';
  4. wolne[1] = '12';
  5. wolne[2] = '13';
  6. wolne[3] = '21';
  7. wolne[4] = '22';
  8. wolne[5] = '23';
  9. wolne[6] = '31';
  10. wolne[7] = '32';
  11. wolne[8] = '33';
  12.  
  13. function find_index(t, v){
  14. for(var i=0,n=t.length;i<n;++i)
  15. if(t[i]==v)
  16. return i
  17. return null
  18. }
  19.  
  20. function zaznacz (pole) {
  21. co = document.getElementById(pole);
  22. co.innerHTML = "krzyzyk.gif";
  23. z = find_index(wolne, pole); //znajduje indeks pola o wartości pole
  24. delete (wolne[z]); //kasuje z tablicy 'wolne'
  25. wolne.sort();
  26. wolne.length-=1;
  27. s = Math.round((wolne.length-1)*Math.random()); //losowa liczba od 0 do ilości elementów tablicy
  28.  
  29. if(wolne.length > 0)
  30. {
  31. ID=setTimeout("zaz_komp(wolne[s]);", 1000); //zaz_komp po sekundzie
  32. }
  33.  
  34. }
  35.  
  36. function zaz_komp (pole) {
  37. co = document.getElementById(pole);
  38. co.innerHTML = "kolko.gif";
  39. z = find_index(wolne, pole);
  40. delete (wolne[z]); //usuwa z tablicy 'wolne'
  41. wolne.sort(); //sortuje
  42. wolne.length-=1;
  43. }
Glarden
Rzeczywiście, działa. Jaka szkoda, że sam do tego nie doszedłem... tak czy inaczej - dzięki.
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.