title: InnerHTML with onclick= not executing associated JS functions
body: <p>I have a table, that when being edited replaces the cell with an input field using the JS below.</p>
  <pre><code>account.innerHTML=&quot;&lt;input type='text'  id='account_text&quot;+no+&quot;' value='&quot;+account_data+&quot;' class='dropbutton2' onclick='dropdownFunction2(); options2()' onkeyup='filterFunction2()'&gt; &lt;div id='myDropdown2' class='dropdown-content2'&gt;&lt;/div&gt;&quot;;
  </code></pre>
  <p>When the input field is clicked I want the dropdown div to be shown using this JS:</p>
  <pre><code>/* When the user clicks on the button,
  toggle between hiding and showing the dropdown content */
  function dropdownFunction2 (){
    document.getElementById(&quot;myDropdown2&quot;).classList.toggle(&quot;show&quot;);
    document.getElementById('myDropdown2').innerHTML = '';
  }
  //Searchable dropdown
  function filterFunction2(){
    var input, filter, ul, li, a, i;
    input = document.querySelectorAll(&quot;.dropbutton2&quot;);
    filter = input.value.toUpperCase();
    div = document.getElementById(&quot;myDropdown2&quot;);
    a = div.getElementsByTagName(&quot;a&quot;);
    for (i = 0; i &lt; a.length; i++) {
      txtValue = a[i].textContent || a[i].innerText;
      if (txtValue.toUpperCase().indexOf(filter) &gt; -1) {
        a[i].style.display = &quot;&quot;;
      } else {
        a[i].style.display = &quot;none&quot;;
      }
    }
  }
  //Get the dropdown content
  function options2 (){
    document.querySelectorAll(&quot;.accname&quot;).forEach(element =&gt; {
      let dropdown = document.querySelector(&quot;#myDropdown2&quot;);
      let options = document.querySelectorAll(&quot;#myDropdown2 &gt; a&quot;).length;
      dropdown.innerHTML = dropdown.innerHTML + '&lt;a id=&quot;accselectedit' + (options + 1) + '&quot; onclick=&quot;selectAccountedit(\'' + element.innerText + '\')&quot;&gt; ' + element.innerText + ' &lt;/a&gt;'
    });
  }
  //if dropdown is visible, on off click hide
  
  
  
  //Fill selected account as input
  function selectAccountedit(value) {
    input = document.querySelectorAll(&quot;.dropbutton2&quot;);
    input.value = value;
  }
  </code></pre>
  <p>Unfortunately none of the functions (except maybe options2) is triggered. The only way I can get the dropdown to show on click in the input field is by giving .dropdown-content2 display: block via css. But the js function that's supposed to handle visibility is not working.</p>
  <p>Any idea why it's not working? Originally I used get elementById instead of query selector but I'm not sure I can use Id in this case.</p>