Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][HTML]pobranie wartości class i nadanie nowej
Forum PHP.pl > Forum > Przedszkole
agata
7.05.2010, 11:20:32
witam,
mam książkowy skrypcik generujący kartę do gry w bingo. Napisałam go i wszystko działa do momentu kiedy chcę zaznaczyć dane pole. W książce nie jest to dobrze opisane tak jakby brakowało czegoś w treści/kodzie.
[PHP] pobierz, plaintext 
  1. window.onload = inicjacja;
  2. var uzyteLiczby = new Array(76);
  3. function inicjacja() {
  4.     if (document.getElementById){
  5.         document.getElementById("reload").onclick = innaKarta;
  6.         newKarta();
  7.  
  8.     }
  9.     else {
  10.         alert("Twoja przeglądarka nie jest w stanie obsłużyć tego skryptu!");
  11.     }
  12. }
  13. function newKarta(){
  14.      for(var i=0; i<24; i++){
  15.                 setPole(i);
  16.         }
  17. }
  18.  
  19. function setPole(thisPole){
  20.     var nrPola = "pole" + thisPole;
  21.     var nrKolumna = new Array(0,1,2,3,4,0,1,2,3,4,0,1,3,4,0,1,2,3,4,0,1,2,3,4);
  22.     var podstawaKolumny = nrKolumna[thisPole] * 15;
  23.     var newLiczba;
  24.  
  25.         do {
  26.             newLiczba = podstawaKolumny + getLiczba();
  27.         }
  28.         while (uzyteLiczby[newLiczba]);
  29.  
  30.         uzyteLiczby[newLiczba] = true;
  31.         document.getElementById(nrPola).innerHTML = newLiczba;
  32.         document.getElementById(nrPola).className = "";    // 1 pobranie wartości class danego pola?
  33.         document.getElementById(nrPola).onmousedown = toggleColor;  //2 wywołanie funkcji po kliknięciu na dane pole 
  34. }
  35.  
  36.  
  37. function getLiczba() {
  38.     return (Math.floor(Math.random() * 15) + 1);
  39. }
  40.  
  41. function innaKarta(){
  42.    for (var i=0; i<uzyteLiczby.length; i++){
  43.        uzyteLiczby[i] = false;
  44.    }
  45.    newKarta();
  46.    return false;
  47. }
  48.  
  49. function toggleColor(){
  50.    /* if (evt){
  51.         var thisPole = evt.target;
  52.     }
  53.     else{
  54.         var thisPole = window.event.srcElement; //3 w tym komentarzu zawarta instrukcja jest dla explorera (wg książki)
  55.     }*/ 
  56.     if (thisPole.className == ""){
  57.         thisPole.className = "pickedBG";   //4 przypisanie parametrowi class wartości pickedBG
  58.     }
  59.     else{
  60.         thisPole.className = "";
  61.     }
  62. }
[PHP] pobierz, plaintext


Proszę o wyjaśnienie komentarzy 1, 2, 3, 4 czy dobrze je rozumiem.

W 4 komentarzu nadawana jest wartość pickedBG dla class, czy tak?
Jeśli tak to rozumiem że wystarczy zdeklarować w css kolor dla pickedBG, jednak ja robię to w ten sposób to nie działa, karta jest generowana ale nie można zaznaczyć żadnego pola.
Jak mam to rozwiązać, ewentualnie gdzie mam błędy w skrypcie.

Kod html to zwykła tabela 5x5.
piotrooo89
7.05.2010, 11:23:10
próbowałeś degugować firebugiem? masz to gdzies on-line?
Blackhole
7.05.2010, 11:25:34
1. wyzerowanie nazwy klasy danego pola
agata
10.05.2010, 14:28:28
nie mam tego nigdzie, na localhoscie to stoi.

Wrzucam kod html też jakby ktoś chciał to przetestować, żeby nie trzeba było klepać tabeli.
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.         <link rel="stylesheet" rev="stylesheet" href="script01.css" />
  6. 	<script src="bingo.js" type="text/javascript" language="javascript"></script>
  7.         <title></title>
  8.     </head>
  9.     <body>
  10.         <table>
  11.             <tr>
  12. 		<th width="20%">B</th>
  13. 		<th width="20%">I</th>
  14. 		<th width="20%">N</th>
  15. 		<th width="20%">G</th>
  16. 		<th width="20%">O</th>
  17. 	</tr>
  18.             <tr>
  19.                 <td id="pole0" class=""> </td>
  20.                 <td id="pole1" class=""> </td>
  21.                 <td id="pole2" class=""> </td>
  22.                 <td id="pole3" class=""> </td>
  23.                 <td id="pole4" class=""> </td>
  24.  
  25.             </tr>
  26.             <tr>
  27.                 <td id="pole5" class=""> </td>
  28.                 <td id="pole6" class=""> </td>
  29.                 <td id="pole7" class=""> </td>
  30.                 <td id="pole8" class=""> </td>
  31.                 <td id="pole9" class=""> </td>
  32.  
  33.             </tr>
  34.              <tr>
  35.                 <td id="pole10" class=""> </td>
  36.                 <td id="pole11" class=""> </td>
  37.                 <td id="free">wolne</td>
  38.                 <td id="pole12" class=""> </td>
  39.                 <td id="pole13" class=""> </td>
  40.  
  41.             </tr>
  42.              <tr>
  43.                 <td id="pole14" class=""> </td>
  44.                 <td id="pole15" class=""> </td>
  45.                 <td id="pole16" class=""> </td>
  46.                 <td id="pole17" class=""> </td>
  47.                 <td id="pole18" class=""> </td>
  48.  
  49.             </tr>
  50.              <tr>
  51.                 <td id="pole19" class=""> </td>
  52.                 <td id="pole20" class=""> </td>
  53.                 <td id="pole21" class=""> </td>
  54.                 <td id="pole22" class=""> </td>
  55.                 <td id="pole23" class=""> </td>
  56.             </tr>
  57.         </table>
  58.         <p><a href="index.php" id="reload">Kliknij tutaj</a>, aby przygotować nową kartę</p>
  59.  
  60.     </body>
  61. </html>
[HTML] pobierz, plaintext


Zrobiłam mały test i wychodzi na to że funkcja toggleColor nie jest wywoływana.
nie jestem do końca pewna czy dobrze kombinuję ale zrobiłam to tak:

[PHP] pobierz, plaintext 
  1. document.getElementById(nrPola).onclick = toggleColor;
  2.  
  3. function toggleColor(){
  4. alert("cos");
  5. }
[PHP] pobierz, plaintext


czy ja idę w ogóle w dobrą stronę, jeśli tak to dlaczego funkcja nie jest wywoływana?

Witam, z pomocą kolegi udało mi się rozwiązać problem, poniżej zamieszczam działający kod.

[PHP] pobierz, plaintext 
  1. window.onload = inicjacja;
  2. var uzyteLiczby = new Array(76);
  3.  
  4. function inicjacja() {
  5.     if (document.getElementById){
  6.         document.getElementById("reload").onclick = innaKarta;
  7.         newKarta();
  8.     }
  9.     else {
  10.         alert("Twoja przeglądarka nie jest w stanie obsłużyć tego skryptu!");
  11.     }
  12.  
  13. }
  14. function newKarta(){
  15.      for(var i=0; i<24; i++){
  16.                 setPole(i);
  17.         }
  18. }
  19.  
  20. function setPole(thisPole){
  21.     var nrPole = "pole" + thisPole;
  22.     var nrKolumna = new Array(0,1,2,3,4,0,1,2,3,4,0,1,3,4,0,1,2,3,4,0,1,2,3,4);
  23.     var podstawaKolumny = nrKolumna[thisPole] * 15;
  24.     var newLiczba;
  25.  
  26.         do {
  27.             newLiczba = podstawaKolumny + getLiczba();
  28.         }
  29.         while (uzyteLiczby[newLiczba]);
  30.  
  31.         uzyteLiczby[newLiczba] = true;
  32.         var pole = document.getElementById(nrPole);
  33.         pole.innerHTML = newLiczba;
  34.         pole.className = "";
  35.         pole.onmousedown = function(){zmianaKoloru(nrPole)};
  36. }
  37.  
  38.  
  39. function getLiczba() {
  40.     return (Math.floor(Math.random() * 15) + 1);
  41. }
  42.  
  43. function innaKarta(){
  44.    for (var i=0; i<uzyteLiczby.length; i++){
  45.        uzyteLiczby[i] = false;
  46.    }
  47.    newKarta();
  48.    return false;
  49. }
  50.  
  51. function zmianaKoloru(nrPole){
  52.  
  53.     var pole = document.getElementById(nrPole);
  54.  
  55.      if (pole.className == ""){
  56.  
  57.         pole.className = "kolor";
  58.     }
  59.  
  60.     else{
  61.         pole.className = "";
  62.     }
  63. }
[PHP] pobierz, plaintext


Należało przekazać zmienną, do funkcji zmianaKoloru ale przy jej wywoływaniu należało ją umieścić w innej funkcji tak żeby zmiana koloru nie następowała przy generowaniu nowej karty.
pozdrawiam
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.