title: document.getElementById([id]).value returns an empty string
body: <p>I'm trying to get a basic search function working on a list that gets displayed inside a modal.</p>
  <p>When I type something in the input box, <code>input.value</code> in the javascript function below is an empty string for some reason. As a result the javascript search/filter function doesn't do anything.</p>
  <p>thanks for your help.</p>
  <p><strong>VB (generates HTML):</strong></p>
  <pre><code>&lt;WebMethod()&gt;
      Public Function GetIionsList(schedTypeUID As Integer) As String
          
          Dim table As String = &quot;&quot;
          Dim sql As String = &quot;&quot;
          Dim inspListHTML As New StringBuilder
  
          Dim dif As DataInterfaceFactory = GetSettingsDIF()
  
          Dim UserInfo As New NAMEGenericCls.UserCls.NAMEUser
          Dim userName As String = GetUserName(dif)
          UserInfo.Initialise(userName, dif)
          Dim SchedDataRight As New NAMEGenericCls.SecDataRights
          SchedDataRight.LoadDataRights(dif, UserInfo.UID, UserInfo.GroupUID)
  
          Select Case schedTypeUID
              Case SchedType.PLANNED
                  table = &quot;TABLE_ONE&quot;
              Case SchedType.ADHOC
                  table = &quot;TABLE_TWO&quot;
              Case SchedType.EXISTING
                  table = &quot;TABLE_THREE&quot;
          End Select
  
          sql = SchedDataRight.CheckDataRights(dif, &quot;SELECT I_UID FROM &quot; &amp; table)
  
          inspListHTML.Append(&quot;&lt;input type='text' id='textInput' onkeyup='IionSearch()' placeholder='Search..' title='Type in a word'&gt;&quot;).AppendLine()
          inspListHTML.Append(&quot;&lt;br&gt;&quot;).AppendLine()
          inspListHTML.Append(&quot;&lt;br&gt;&quot;).AppendLine()
          inspListHTML.Append(&quot;&lt;ul id='ISelectListUL' class='list-group'&gt;&quot;).AppendLine()
  
          Using dr As New DataReader(dif)
              dr.ExecuteReader(sql)
  
              Dim PreviousIUID As String = &quot;&quot;
              Dim CurrentIUID As String = &quot;&quot;
  
              While dr.Read()
                  If Not IsDBNull(dr!I_UID) Then
                      CurrentIUID = dr!I_UID
  
                      If CurrentIUID &lt;&gt; PreviousIUID Then
                          PreviousIUID = CurrentIUID
                          Using drlkp As New DataReader(dif)
  
                              Dim qp As New List(Of Sqlclient.SqlParameter)
                              qp.Add(New SqlClient.SqlParameter(&quot;@CurrentIUID&quot;, CurrentIUID))
  
                              Dim lkp As String = SchedDataRight.CheckDataRights(dif, &quot;SELECT I_NAME FROM TABLE_TWO WHERE I_UID = @CurrentIUID &quot;)
                              drlkp.ExecuteReader(lkp, qp)
  
                              If Not IsDBNull(lkp) Then
                                  getInspListHTML(inspListHTML, dr!I_UID, drlkp!I_NAME, schedTypeUID)
                              End If
                          End Using
  
                      End If
                  Else
                      getInspListHTML(inspListHTML, 999, &quot;Error - No Iions Found&quot;, &quot;&quot;)
                  End If
  
              End While
          End Using
  
          inspListHTML.Append(&quot;&lt;/ul&gt;&quot;).AppendLine()
  
          Return inspListHTML.ToString()
  
  
      End Function
  </code></pre>
  <p><strong>Rendered HTML:</strong></p>
  <pre><code>&lt;input type='text' id='textInput' onkeyup='IionSearch()' placeholder='Search..' title='Type in a word'&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;ul id='ISelectListUL' class='list-group'&gt;
  &lt;li&gt;&lt;a id='li_InspID_117' onclick=&quot;javascript:selectIion(this.id,'1');&quot; class='list-group-item'&gt;1 Monthly - Safety Iion                     &lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a id='li_InspID_118' onclick=&quot;javascript:selectIion(this.id,'1');&quot; class='list-group-item'&gt;x1 and 2 Monthly - Safety Iion              &lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a id='li_InspID_119' onclick=&quot;javascript:selectIion(this.id,'1');&quot; class='list-group-item'&gt;Full Sector - Safety Iion                   &lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a id='li_InspID_120' onclick=&quot;javascript:selectIion(this.id,'1');&quot; class='list-group-item'&gt;x2 Monthly - Safety Iion                    &lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a id='li_InspID_121' onclick=&quot;javascript:selectIion(this.id,'1');&quot; class='list-group-item'&gt;x4 Monthly - Safety Iion                    &lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a id='li_InspID_122' onclick=&quot;javascript:selectIion(this.id,'1');&quot; class='list-group-item'&gt;xHigh Traffic - Safety Iion                 &lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a id='li_InspID_123' onclick=&quot;javascript:selectIion(this.id,'1');&quot; class='list-group-item'&gt;xHigh &amp;amp; Med Traffic - Safety Iion           &lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a id='li_InspID_124' onclick=&quot;javascript:selectIion(this.id,'1');&quot; class='list-group-item'&gt;xMed Traffic - Safety Iion                  &lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a id='li_InspID_125' onclick=&quot;javascript:selectIion(this.id,'1');&quot; class='list-group-item'&gt;xLow Traffic - Safety Iion                  &lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a id='li_InspID_126' onclick=&quot;javascript:selectIion(this.id,'1');&quot; class='list-group-item'&gt;xPeriod Full Sector - Safety Iion           &lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a id='li_InspID_127' onclick=&quot;javascript:selectIion(this.id,'1');&quot; class='list-group-item'&gt;xPeriod Full Sector - Safety Iion           &lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a id='li_InspID_128' onclick=&quot;javascript:selectIion(this.id,'1');&quot; class='list-group-item'&gt;xPeriod Full Sector - Safety Iion           &lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a id='li_InspID_129' onclick=&quot;javascript:selectIion(this.id,'1');&quot; class='list-group-item'&gt;3 Monthly - Safety Iion                     &lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a id='li_InspID_130' onclick=&quot;javascript:selectIion(this.id,'1');&quot; class='list-group-item'&gt;6 Monthly - Safety Iion                     &lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a id='li_InspID_131' onclick=&quot;javascript:selectIion(this.id,'1');&quot; class='list-group-item'&gt;1 and  3 Monthly - Safety Iion              &lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a id='li_InspID_132' onclick=&quot;javascript:selectIion(this.id,'1');&quot; class='list-group-item'&gt;Adhoc                                             &lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  <p><strong>The rendered HTML is displayed using:</strong></p>
  <p><code>$('#IionList').html(inspListHTML);</code></p>
  <p><strong>JS:</strong></p>
  <pre><code>function IionSearch() {
          var input, filter, ul, li, a, i, txtValue;
          input = document.getElementById(&quot;textInput&quot;);
          filter = input.value.toUpperCase();
          ul = document.getElementById(&quot;ISelectListUL&quot;);
          li = ul.getElementsByTagName(&quot;li&quot;);
          for (i = 0; i &lt; li.length; i++) {
              a = li[i].getElementsByTagName(&quot;a&quot;)[0];
              txtValue = a.textContent || a.innerText;
              if (txtValue.toUpperCase().indexOf(filter) &gt; -1) {
                  li[i].style.display = &quot;&quot;;
              } else {
                  li[i].style.display = &quot;none&quot;;
              }
          }
      };
  </code></pre>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function IionSearch() {
    var input, filter, ul, li, a, i, txtValue;
    input = document.getElementById("textInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("ISelectListUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i &lt; li.length; i++) {
      a = li[i].getElementsByTagName("a")[0];
      txtValue = a.textContent || a.innerText;
      if (txtValue.toUpperCase().indexOf(filter) &gt; -1) {
        li[i].style.display = "";
      } else {
        li[i].style.display = "none";
      }
    }
  };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type='text' id='textInput' onkeyup='IionSearch()' placeholder='Search..' title='Type in a word'&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;ul id='ISelectListUL' class='list-group'&gt;
    &lt;li&gt;&lt;a id='li_InspID_117' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'&gt;1 Monthly - Safety Iion                     &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a id='li_InspID_118' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'&gt;x1 and 2 Monthly - Safety Iion              &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a id='li_InspID_119' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'&gt;Full Sector - Safety Iion                   &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a id='li_InspID_120' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'&gt;x2 Monthly - Safety Iion                    &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a id='li_InspID_121' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'&gt;x4 Monthly - Safety Iion                    &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a id='li_InspID_122' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'&gt;xHigh Traffic - Safety Iion                 &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a id='li_InspID_123' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'&gt;xHigh &amp;amp; Med Traffic - Safety Iion           &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a id='li_InspID_124' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'&gt;xMed Traffic - Safety Iion                  &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a id='li_InspID_125' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'&gt;xLow Traffic - Safety Iion                  &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a id='li_InspID_126' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'&gt;xPeriod Full Sector - Safety Iion           &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a id='li_InspID_127' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'&gt;xPeriod Full Sector - Safety Iion           &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a id='li_InspID_128' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'&gt;xPeriod Full Sector - Safety Iion           &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a id='li_InspID_129' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'&gt;3 Monthly - Safety Iion                     &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a id='li_InspID_130' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'&gt;6 Monthly - Safety Iion                     &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a id='li_InspID_131' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'&gt;1 and  3 Monthly - Safety Iion              &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a id='li_InspID_132' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'&gt;Adhoc                                             &lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>