title: javascript radio button value get null
body: <p>In the javascript, I have the pointer to get the name of the fruit. But the alert always shows null.
  I checked my logic but unable to find the problem. Any suggestions? thanks!</p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;My Fruit&lt;/title&gt;
          &lt;script type="text/javascript"&gt;
          function checkFruit(){
              var fruit_radio_pointers = document.querySelector('[name="fruit"]'); 
              var which_fruit = null;
              for(var i=0; i&lt;fruit_radio_pointers.length; i++){
                  if(fruit_radio_pointers[i].checked){
                      which_fruit = fruit_radio_pointers[i].value;  
                      break;            
                  }    
              }
              alert(which_fruit);
          }
  
          //document.getElementById("my_btn").addEventListener("click", checkFruit, false);
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;p&gt;
          &lt;input name="fruit" type="radio" value="apple" /&gt; Apple&lt;br /&gt;
          &lt;input name="fruit" type="radio" value="cherry" /&gt; Cherry
      &lt;/p&gt;
      &lt;p&gt;
         &lt;button id="my_btn" onclick="checkFruit()" &gt;Which Fruit?&lt;/button&gt;
  
      &lt;/p&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>