Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]document.querySelectorAll nie pobiera wyników
Forum PHP.pl > Forum > Przedszkole
DerekDX
27.11.2013, 18:05:36 
[HTML] pobierz, plaintext 
  1. <!--
  2. <!DOCTYPE html>
  3. <html>
  4.   <head>
  5.     <title></title>
  6.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <!-- Bootstrap -->
  9.     <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
  10.     <link href="lib/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
  11.     <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
  12.  
  13.     <!-- Load jQuery -->
  14.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
  15.     </script>
  16.     <!-- Load Google JSAPI -->
  17.     <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  18.     <script type="text/javascript">
  19.       var num = null;
  20.       var ele = document.querySelectorAll(".btn-group > button.btn btn-primary");
  21.       for (var i = 0; i < ele.length; i++) {
  22.         ele[i].addEventListener("click", function() {
  23.           num = +this.innerHTML;
  24.           alert("Value is " + num);
  25.         });
  26.       }
  27.     </script>
  28.   </head>
  29.   <body>
  30.     <div class="btn-group" data-toggle="buttons-radio">
  31.       <button type="button" class="btn btn-primary">Left</button>
  32.       <button type="button" class="btn btn-primary">Middle</button>
  33.       <button type="button" class="btn btn-primary">Right</button>
  34.     </div>
  35.     <script src="http://code.jquery.com/jquery.js"></script>
  36.     <script src="lib/bootstrap/js/bootstrap.min.js"></script>
  37.   </body>
  38. </html>
[HTML] pobierz, plaintext


Witajcie powyżej wstawiam mój kod. Mój problem polega na tym, że funkcja document.querySelectorAll nie pobiera żadnej wartości. A powinna pobrać tablice ze wszystkimi elementami z kontenera div.btn-group
SmokAnalog
27.11.2013, 18:55:30
Użyłeś nieprawidłowego selektora. Powinieneś dać:
[CSS] pobierz, plaintext 
  1. .btn-group > button.btn.btn-primary
[CSS] pobierz, plaintext
.
DerekDX
27.11.2013, 19:26:38 
[HTML] pobierz, plaintext 
  1. <!--
  2. To change this template, choose Tools | Templates
  3. and open the template in the editor.
  4. -->
  5. <!DOCTYPE html>
  6. <html>
  7.   <head>
  8.     <title></title>
  9.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  10.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  11.     <!-- Bootstrap -->
  12.     <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
  13.     <link href="lib/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
  14.     <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
  15.  
  16.     <!-- Load jQuery -->
  17.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
  18.     </script>
  19.     <!-- Load Google JSAPI -->
  20.     <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  21.     <script type="text/javascript">
  22.       var num = null;
  23.       var ele = document.querySelectorAll(".btn-group > button.btn.btn-primary");
  24.       for (var i = 0; i < ele.length; i++) {
  25.         ele[i].addEventListener("click", function() {
  26.           num = +this.innerHTML;
  27.           alert("Value is " + num);
  28.         });
  29.       }
  30.     </script>
  31.   </head>
  32.   <body>
  33.     <div class="btn-group" data-toggle="buttons-radio">
  34.       <button type="button" class="btn btn-primary">Left</button>
  35.       <button type="button" class="btn btn-primary">Middle</button>
  36.       <button type="button" class="btn btn-primary">Right</button>
  37.     </div>
  38.     <script src="http://code.jquery.com/jquery.js"></script>
  39.     <script src="lib/bootstrap/js/bootstrap.min.js"></script>
  40.   </body>
  41. </html>
[HTML] pobierz, plaintext


Kod mój zmieniłem jak powyżej. Czyli zmieniłem wartość w funkcji querySelectorAll lecz bez efektu.
SmokAnalog
27.11.2013, 19:40:36
Nie działa Ci dlatego, że skrypt się wywołuje zanim drzewo DOM jest gotowe. Masz dwie możliwości:
  1. Otoczyć skrypt zdarzeniem document.onload
  2. Przesunąć cały blok skryptu na koniec strony (przed zamknięciem </body>)

Polecam sposób nr 2.
DerekDX
27.11.2013, 19:50:49
Ehh. Zrobiłem jak piszesz. wrzuciłem cały js na dół ale nadal niepowodzenie. Moje body wygląda tak:
[HTML] pobierz, plaintext 
  1.  <body>
  2.     <div class="btn-group" data-toggle="buttons-radio">
  3.       <table>
  4.         <tr>
  5.           <td><button type="button" class="btn btn-primary">ON</button></td></tr>
  6.         <tr><td><button type="button" class="btn btn-primary">ON</button></td></tr>
  7.         <tr> <td><button type="button" class="btn btn-primary">ON</button></td>
  8.         </tr>
  9.       </table>
  10.  
  11.     </div>
  12.     <script src="http://code.jquery.com/jquery.js"></script>
  13.     <script src="lib/bootstrap/js/bootstrap.min.js"></script>
  14.     <script type="text/javascript">
  15.       var num = null;
  16.       var ele = document.querySelectorAll(".btn-group > button.btn btn-primary");
  17.       for (var i = 0; i < ele.length; i++) {
  18.         ele[i].addEventListener("click", function() {
  19.           num = +this.innerHTML;
  20.           alert("Value is " + num);
  21.         });
  22.       }
  23.     </script>
  24.   </body>
  25. </html>
[HTML] pobierz, plaintext
SmokAnalog
27.11.2013, 19:52:34
Bo wrzuciłeś, ale bez mojej porady w sprawie selektora biggrin.gif
DerekDX
27.11.2013, 19:59:51
Sprawdziłem również to, ale nadal nie działa. Poniżej kod ze wszystkimi Twoimi wskazówkami

[HTML] pobierz, plaintext 
  1. <!--
  2. To change this template, choose Tools | Templates
  3. and open the template in the editor.
  4. -->
  5. <!DOCTYPE html>
  6. <html>
  7.   <head>
  8.     <title></title>
  9.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  10.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  11.     <!-- Bootstrap -->
  12.     <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
  13.     <link href="lib/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
  14.     <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
  15.  
  16.     <!-- Load jQuery -->
  17.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
  18.     </script>
  19.     <!-- Load Google JSAPI -->
  20.     <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  21.  
  22.   </head>
  23.   <body>
  24.     <div class="btn-group" data-toggle="buttons-radio">
  25.       <table>
  26.         <tr>
  27.           <td><button type="button" class="btn btn-primary">ON</button></td></tr>
  28.         <tr><td><button type="button" class="btn btn-primary">ON</button></td></tr>
  29.         <tr> <td><button type="button" class="btn btn-primary">ON</button></td>
  30.         </tr>
  31.       </table>
  32.     </div>
  33.     <script src="http://code.jquery.com/jquery.js"></script>
  34.     <script src="lib/bootstrap/js/bootstrap.min.js"></script>
  35.     <script type="text/javascript">
  36.       var num = null;
  37.       var ele = document.querySelectorAll(".btn-group > button.btn.btn-primary");
  38.       for (var i = 0; i < ele.length; i++) {
  39.         ele[i].addEventListener("click", function() {
  40.           num = +this.innerHTML;
  41.           alert("Value is " + num);
  42.         });
  43.       }
  44.     </script>
  45.   </body>
  46. </html>
[HTML] pobierz, plaintext


Nie rozumiem tylko dlaczego w funkcji miało by być .btn-group > button.btn.btn-primary skoro w klasie css jest .btn-group > button.btn btn-primary
SmokAnalog
27.11.2013, 20:10:51
Zmieniłeś HTML i teraz już selektor jest nieaktualny.
werdan
27.11.2013, 20:26:57
http://jsbin.com/acEJOweV/1/edit
SmokAnalog
27.11.2013, 20:59:48
Cytat(DerekDX @ 27.11.2013, 19:59:51 ) *
Nie rozumiem tylko dlaczego w funkcji miało by być .btn-group > button.btn.btn-primary skoro w klasie css jest .btn-group > button.btn btn-primary

Zapis class="klasa1 klasa2" oznacza, że masz przypisane dwie klasy do jednego elementu. Oczywiście możesz mieć ich tyle, ile chcesz. Selektor:
[CSS] pobierz, plaintext 
  1. button.btn btn-primary
[CSS] pobierz, plaintext

Oznaczałby element o tagu btn-primary (dziwadło), który jest gdzieś wewnątrz elementu button o klasie btn. Spacja w selektorze to "element wewnątrz".

Natomiast taki selektor:
[CSS] pobierz, plaintext 
  1. button.btn.btn-primary
[CSS] pobierz, plaintext

Oznacza element o tagu button, który ma klasę btn, jednocześnie mając klasę btn-primary.

A wracając do Twojego kodu, to używasz jQuery - może warto byłoby skorzystać z jego dobrodziejstw? Tutaj masz informację o wsparciu dla querySelectorAll: http://caniuse.com/queryselector - nie jest źle, ale w IE7 np. nie zadziała.

Lepiej, żeby zajął się tym jQuery - poniższy kod robi dokładnie to samo, co Twój:
[JAVASCRIPT] pobierz, plaintext 
  1. $(".btn-group button.btn.btn-primary").click(function () {
  2. 	alert("Value is " + parseInt($(this).html(), 10));
  3. });
[JAVASCRIPT] pobierz, plaintext

Prawda, że prościej i przyjemniej?

Pomijam sensowność rzutowania wewnętrznego HTML-a na liczbę (u Ciebie było +this.innerHTML). Czy ten zapis był pomyłką?
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.