title: Passing variable in document.getElementById returns Null
body: <p>While calling <code>document.getElementById</code> by using variable it return null value. Below is the sample 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>function savenext(k)
  {
    qdd=k.id;
    var divs = document.getElementsByClassName("qpanel");
    for(var i=0;i&lt;divs.length;i++) 
    {
      divs[i].style.display = "none";
    }
    str = qdd.replace(/SN/g, '');
    str='Q'+str;
    var d = document.getElementById(str);
    d.style.display = "block";
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="main" class="qpanel" id="Q3"&gt;
       Q3
      &lt;/div&gt;
      
      &lt;div id="main" class="qpanel" id="Q2"&gt;
       Q2
      &lt;/div&gt;
      
      &lt;div id="main" class="qpanel" id="Q6"&gt;
       Q6
      &lt;/div&gt;
      
      &lt;input type="button" value="Save and next" id="SN3" onclick="savenext(this)" class="savenext"&gt;
      &lt;input type="button" value="Save and next" id="SN2" onclick="savenext(this)" class="savenext"&gt;
      &lt;input type="button" value="Save and next" id="SN6" onclick="savenext(this)" class="savenext"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><code>document.getElementById(str)</code> returns null</p>