title: I am getting Uncaught TypeError: Cannot read property 'options' of null even though element id defined
body: <p>I am new to Javascript and HTML.I am getting this exception even though I have element defined in HTML. Please can somebody help? I am trying to draw a shape(initially a circle) depending on the input fromuser like shape type, coordinates, width , colour etc and this I am doing using datalist in HTML. But not able to get value of datalist shape that is selected in javascript function "rendershape".</p>
  
  <p>Below is my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;title&gt;Orchid School&lt;/title&gt;
  &lt;body&gt;
  
  &lt;form id="myForm" name="formName" onSubmit="rendershape();"&gt;
  Enter a shape:&lt;br&gt;
  &lt;input list="shapes" id="shapeid" name="shapeName"&gt;
  &lt;datalist id="shapes"&gt;
  &lt;option value="Circle"&gt;
  &lt;option value="Square"&gt;
  &lt;option value="Rectangle"&gt;
  &lt;option value="polygon"&gt;
  &lt;option value="triangle"&gt;
  &lt;/datalist&gt; 
  &lt;br&gt;&lt;br&gt;
  
  Enter X-coordinate:
  &lt;br&gt;&lt;br&gt;
  &lt;input list="xcoordinates" name="xcoName"&gt;
  &lt;datalist id="xcoordinates"&gt;
  &lt;option value="50"&gt;
  &lt;option value="75"&gt;
  &lt;option value="100"&gt;
  &lt;option value="150"&gt;
  &lt;option value="200"&gt;
  &lt;/datalist&gt;
  &lt;br&gt;&lt;br&gt;
  
  Enter Y-coordinate:
  &lt;br&gt;&lt;br&gt;
  &lt;input list="ycoordinates" name="ycoName"&gt;
  &lt;datalist id="ycoordinates"&gt;
  &lt;option value="50"&gt;
  &lt;option value="75"&gt;
  &lt;option value="100"&gt;
  &lt;option value="150"&gt;
  &lt;option value="200"&gt;
  &lt;/datalist&gt;
  &lt;br&gt;&lt;br&gt;
  
  Enter colour:&lt;br&gt;&lt;br&gt;
  &lt;input list="color" name-"colorName"&gt;
  &lt;datalist id="color"&gt;
  &lt;option value="Red"&gt;
  &lt;option value="Blue"&gt;
  &lt;option value="Orange"&gt;
  &lt;option value="Black"&gt;
  &lt;option value="Green"&gt;
  &lt;/datalist&gt; 
  &lt;br&gt;&lt;br&gt;
  
  Enter line width:  &lt;br&gt;&lt;br&gt;
  &lt;input list="width" name="WidhtName"&gt;
  &lt;datalist id="width"&gt;
  &lt;option value="1"&gt;
  &lt;option value="2"&gt;
  &lt;option value="3"&gt;
  &lt;option value="4"&gt;
  &lt;option value="5"&gt;
  &lt;/datalist&gt; 
  &lt;br&gt;&lt;br&gt; 
  
  &lt;/form&gt;
  
  &lt;button onclick="rendershape()"&gt;Draw shape&lt;/button&gt;&lt;br&gt;&lt;br&gt;
  </code></pre>
  
  <p>
  Your browser does not support the HTML5 canvas tag.</p>
  
  <pre><code>&lt;script&gt;
  function rendershape()
  {   
      document.write('IN JS');
      var shape= document.getElementById("shapeid").options.value;
      console.log(shape);
      document.write(shape);
      var xcoordinat=document.getElementById("xcoordinates").options.value;
      console.log(xcoordinates);
      var ycoordinate=document.getElementById("ycoordinates").options.value;
      console.log(ycoordinates);
      var width=document.getElementById("width").options.value;
      if(shape=='Circle')
      {
          var c=document.getElementById("myCanvas");
          var ctx=c.getContext("2d");
          ctx.beginPath();
          ctx.arc(xcoordinat,ycoordinate,50,0,2*Math.PI);
          ctx.stroke();
      }
  }
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>