title: Uncaught TypeError while using JS function
body: <p>I am stuck with something which I cannot figure out and might need some assistance, I'm not an expert in JS</p>
  
  <p>I have a JSON being formatted based on the click of a radio button and this works perfectly fine</p>
  
  <p><a href="http://jsfiddle.net/8kdraw9L/" rel="nofollow noreferrer">http://jsfiddle.net/8kdraw9L/</a></p>
  
  <p>I then took up this piece of code and included this in my main html I get the below in the console and the function doesn't work as well</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'value' of null</p>
  </blockquote>
  
  <p><a href="http://jsfiddle.net/8kdraw9L/1/" rel="nofollow noreferrer">http://jsfiddle.net/8kdraw9L/1/</a></p>
  
  <p>I'm probably missing out on something</p>
  
  <pre><code>&lt;script&gt;
  var element = document.getElementById("urls").value;
  var obj = JSON.parse(element);
  var rad = document.querySelectorAll('.radio');
  for (var i = 0; i &lt; rad.length; i++) {
      rad[i].addEventListener('change', function() {
          selection = this.value
  
          obj["response"]["headers"] = {
          "Content-Type": selection
      }
          document.getElementById("urls").innerHTML = JSON.stringify(obj, undefined, 4);
      });
  }
  &lt;script&gt;
  </code></pre>