title: JSON and Radio Button input?
body: <p>So I'm trying to make a webpage that produces a different card depending on what you choose. </p>
  
  <p>Here are some of my radio buttons and a normal button: </p>
  
  <pre><code>&lt;form action=""&gt;
    &lt;input type="radio" name="Ace" value="1" id="rank"&gt; Ace
    &lt;input type="radio" name="2" value="2" id="rank"&gt; 2
    &lt;input type="radio" name="3" value="3" id="rank"&gt; 3&lt;br&gt;
    &lt;input type="radio" name="4" value="4" id="rank"&gt; 4
  
    &lt;button id="btn1"&gt;Deal the Card&lt;/button&gt;
  </code></pre>
  
  <p>Here is the js code I'm using: </p>
  
  <pre><code> var getRank = function(x){
  var rank = 
  '{"1": "Ace", "2": "2", "3": "3", "4": "4", "5": "5", "6": "6", "7": "7", "8": "8", "9": "9", "10": "10",\
    "11": "Jack", "12": "Queen", "13": "King"}'
  var rank = JSON.parse(rank)
  
  return rank[x]
  }
  
   var dealCard = function(){
       var input = (document.querySelector("#rank").value)
       var input2 = (document.querySelector("#suit").value)
  
       if (input === rank[i])
          return getRank(input)
  
   var main = function() {
  
  console.log(this.id);
  
  if (this.id == "btn1")
  {   
      dealCard()
  }
  
    };
  
    window.addEventListener("load", function() {
  
  //select the buttons
  var buttons = document.querySelectorAll("button");
  
  //register the same handler for each button
  for (var i = 0; i &lt; buttons.length; ++i) {
      buttons[i].addEventListener("click", main);
  }
  
   });
  </code></pre>
  
  <p>So I'm trying to have the page set up to when I click the normal button, it displays what kind of card I have based on what radio button is selected. So if I select the "Ace" radio button, I want it to take that radio button and run it through the getRank function, and then display the results after I select the Deal Card button. Can anyone tell me what I am doing wrong? Cause right now nothing happens when i click the deal button.</p>