title: JavaScript - Unable to get property 'value' of undefined or null reference
body: <p>Following code runs for the first control fine and fails for the second control despite being exactly identical: </p>
  
  <pre><code>if (document.getElementById("employeeID").value == "") {
      document.getElementById("lblEmp").textContent = "Employee Name is required";
      ret = false;
  } else {
      document.getElementById("lblEmp").textContent = "";
  }
  
  if (document.getElementById("grossSalary").value == "") {
      document.getElementById("lblGrossSalary").textContent = "Gross Salary is required";
      ret = false;
  } else  {
      document.getElementById('#lblGrossSalary').textContent = "";
  }
  </code></pre>
  
  <p>Code is working as expected for <code>employeeID</code> control but throwing topic error on <code>grossSalary</code> control. </p>
  
  <p><b>Razor:</b></p>
  
  <pre><code>&lt;div class="form-group"&gt;
      @Html.LabelFor(model =&gt; model.employeeID, htmlAttributes: new { @class = "control-label col-md-2" })
      &lt;div id="inner" class="col-md-10"&gt;
          @Html.EditorFor(model =&gt; model.employeeID, new { htmlAttributes = new { @class = "form-control" } })
          @Html.ValidationMessageFor(model =&gt; model.employeeID, "", new { @class = "text-danger" })
          &lt;label id="lblEmp" style="color:red"&gt;&lt;/label&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="form-group"&gt;
      @Html.LabelFor(model =&gt; model.grossSalary, htmlAttributes: new { @class = "control-label col-md-2" })
      &lt;div id="inner" class="col-md-10"&gt;
          @Html.EditorFor(model =&gt; model.grossSalary, new { htmlAttributes = new { @class = "form-control"} })
          &lt;label id="lblGrossSalary" style="color:red"&gt;&lt;/label&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>