title: Why does this function's results show up as NaN?
body: <p>I have this simple piece of code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var numb1 = document.getElementById("numb1")
  var numb2 = document.getElementById("numb2")
  var numb3 = document.getElementById("numb3")
  var numb4 = document.getElementById("numb4")
  var v1 = parseInt(numb1)
  var v2 = parseInt(numb2)
  var v3 = parseInt(numb3)
  var v4 = parseInt(numb4)
  var t = parseInt(0)
  
  function myFunction() {
    if (numb1.checked == true) {
      var t = v1 + t
    } else if (numb2.checked == true) {
      var t = v2 + t
    } else if (numb3.checked == true) {
      var t = v3 + t
    } else if (numb4.checked == true) {
      var t = v4 + t
    }
    document.getElementById("demo").innerHTML = t
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input id="numb1" type="radio" value="10"&gt;
  &lt;input id="numb2" type="radio" value="50"&gt;
  &lt;input id="numb3" type="radio" value="80"&gt;
  &lt;input id="numb4" type="radio" value="120"&gt;
  
  &lt;button type="button" onclick="myFunction()"&gt;Submit&lt;/button&gt;
  
  &lt;p id="demo"&gt;&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I get that I definitely could have been more efficient when making my variables, but my problem is that even after I use <code>parseInt()</code> to go from string to integer, the end result in <code>demo</code> displays <code>NaN</code>. Is there something wrong with the way I defined the variables, or is it the calculation of the end value? </p>