title: Getting null from document.getElementById().value
body: <p>document.getElementById().value returning null 
  below is my html code
      </p>
  
  <pre><code>&lt;div id="container"&gt;
  &lt;h1&gt;dknfknf&lt;/h1&gt;
  
  &lt;div id="innerContainer"&gt;
      &lt;div style="height:auto;float:left;width:auto;"&gt;
          &lt;input type="text"  id="wordone" value="plane" readonly/&gt;
          &lt;input type="radio" id="one"/&gt;
      &lt;/div&gt;
      &lt;div style="height:auto;float:left;width:auto;margin-left:80px;"&gt;
          &lt;input type="radio"  id="mOne" onclick="testIt();"/&gt;
          &lt;input style="width:400px;" type="text" id="meanmOne" value="state of tranquility,security and harmony" readonly/&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div id="innerContainer"&gt;
      &lt;div style="height:auto;float:left;width:auto;"&gt;
          &lt;input type="text" id="wordtwo" value="piece" readonly/&gt;
          &lt;input type="radio"  id="two"/&gt;
      &lt;/div&gt;
      &lt;div style="height:auto;float:left;width:auto;margin-left:80px;"&gt;
          &lt;input type="radio" id="mTwo" onclick="testIt();"/&gt;
          &lt;input style="width:400px;" type="text"  id="meanmTwo" value="a fraction or part of a whole" readonly/&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div id="innerContainer"&gt;
      &lt;div style="height:auto;float:left;width:auto;"&gt;
          &lt;input type="text"  id="wordthree" value="passed" readonly/&gt;
          &lt;input type="radio" id="three"/&gt;
      &lt;/div&gt;
      &lt;div style="height:auto;float:left;width:auto;margin-left:80px;"&gt;
          &lt;input type="radio" id="mThree" onclick="testIt();"/&gt;
          &lt;input style="width:400px;" type="text" name="meanmthree" value="a medieval soldier" readonly/&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
      &lt;/div&gt;
      &lt;/body&gt;
  </code></pre>
  
  <p>and the js code </p>
  
  <pre><code>function connect(div1, div2, color, thickness) {
  var off1 = getOffset(div1);
  var off2 = getOffset(div2);
  // bottom right
  var x1 = off1.left + off1.width - 1;
  var y1 = off1.top + off1.height - 5;
  // top right
  var x2 = off2.left;
  var y2 = off2.top + 5;
  // distance
  var length = Math.sqrt(((x2-x1) * (x2-x1)) + ((y2-y1) * (y2-y1)));
  // center
  var cx = ((x1 + x2) / 2) - (length / 2);
  var cy = ((y1 + y2) / 2) - (thickness / 2);
  // angle
  var angle = Math.atan2((y1-y2),(x1-x2))*(180/Math.PI);
  // make hr
  var htmlLine = "&lt;div style='border-radius:5px;padding:0px; margin:0px; height:" + thickness + "px; background-color:" + color + "; line-height:1px; position:absolute; left:" + cx + "px; top:" + cy + "px; width:" + length + "px; -moz-transform:rotate(" + angle + "deg); -webkit-transform:rotate(" + angle + "deg); -o-transform:rotate(" + angle + "deg); -ms-transform:rotate(" + angle + "deg); transform:rotate(" + angle + "deg);' /&gt;";
  //
  //alert(htmlLine);
  div1.disabled = true;
  div2.disabled = true;
  document.body.innerHTML += htmlLine; 
  }
  
  function getOffset( el ) {
  var _x = 0;
  var _y = 0;
  var _w = el.offsetWidth|0;
  var _h = el.offsetHeight|0;
  while( el &amp;&amp; !isNaN( el.offsetLeft ) &amp;&amp; !isNaN( el.offsetTop ) ) {
      _x += el.offsetLeft - el.scrollLeft;
      _y += el.offsetTop - el.scrollTop;
      el = el.offsetParent;
  }
  return { top: _y, left: _x, width: _w, height: _h };
  }
  
  
  
  window.testIt = function() {
  var div1;
  var div2;
  
  if(document.getElementById('one').checked)
      {div1 = document.getElementById('one');}
  else if(document.getElementById('two').checked)
      {div1 = document.getElementById('two');}
  else if(document.getElementById('three').checked)
      {div1 = document.getElementById('three');}
  else if(document.getElementById('four').checked)
      {div1 = document.getElementById('four');}
  else if(document.getElementById('five').checked)
      {div1 = document.getElementById('five');}
  else if(document.getElementById('six').checked)
      {div1 = document.getElementById('six');}
  else if(document.getElementById('seven').checked)
      {div1 = document.getElementById('seven');}
  else if(document.getElementById('eight').checked)
      {div1 = document.getElementById('eight');}
  else if(document.getElementById('nine').checked)
      {div1 = document.getElementById('nine');}
  else if(document.getElementById('ten').checked)
      {div1 = document.getElementById('ten');}
  
  if(document.getElementById('mOne').checked)
      {div2 = document.getElementById('mOne');}
  else if(document.getElementById('mTwo').checked)
      {div2 = document.getElementById('mTwo');}
  else if(document.getElementById('mThree').checked)
      {div2 = document.getElementById('mThree');}
  else if(document.getElementById('mFour').checked)
      {div2 = document.getElementById('mFour');}
  else if(document.getElementById('mFive').checked)
      {div2 = document.getElementById('mFive');}
  else if(document.getElementById('mSix').checked)
      {div2 = document.getElementById('mSix');}
  else if(document.getElementById('mSeven').checked)
      {div2 = document.getElementById('mSeven');}
  else if(document.getElementById('mEight').checked)
      {div2 = document.getElementById('mEight');}
  else if(document.getElementById('mNine').checked)
      {div2 = document.getElementById('mNine');}
  else if(document.getElementById('mTen').checked)
      {div2 = document.getElementById('mTen');}
  
  div1_id = div1.id;
  div2_id = div2.id;
  
  check(div1_id,div2_id);
  connect(div1, div2, "#000000", 2);
  
  
  }
  
  function check(div1,div2)
  {
  var left = div1;
  var right = div2;
  
  var temp1 = 'word'+left;
  alert(temp1);
  var word = document.getElementById('temp1').value;
  //var mean = document.getElementById('mean'+'right').value;
  
  alert(word);
   }
  </code></pre>
  
  <p>i am getting null in this line 
      var word = document.getElementById('temp1').value; 
  in check function can someone help me out ?</p>