title: Fill input box by clicking dynamic <a> element - JS
body: <p>I have an input box which on click opens a dropdown. The dropdown is made up of &quot;a&quot; elements which are dynamically added from a table elsewhere on the page. <a href="https://codepen.io/schinken82/pen/bGebOPr" rel="nofollow noreferrer">Full code (codepen)</a></p>
  <p>I got everything working, but I cant figure out how to get the text of the clicked dropdown option into the input field. Bonus would be getting it to fill the selected value when pressing enter as well.</p>
  <pre><code> &lt;input type=&quot;text&quot; class=&quot;dropbutton&quot; placeholder=&quot;Account&quot; id=&quot;new_account&quot;  onclick=&quot;myFunction(); options()&quot; onkeyup=&quot;filterFunction()&quot;&gt;
    &lt;div id=&quot;myDropdown&quot; class=&quot;dropdown-content&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p>Javascript</p>
  <pre><code>//Get the dropdown content
  function options (){
    document.querySelectorAll(&quot;.accname&quot;).forEach(element =&gt; {
      let dropdown = document.querySelector(&quot;#myDropdown&quot;);
      let options = document.querySelectorAll(&quot;#myDropdown &gt; a&quot;).length;
      dropdown.innerHTML = dropdown.innerHTML + '&lt;a id=&quot;accselect' + (options + 1) + '&quot; onclick=&quot;selectAccount&quot;&gt; ' + element.innerText + ' &lt;/a&gt;'
    });
  }
  
  //Show the dropdown on input click
  function myFunction() {
    document.getElementById(&quot;myDropdown&quot;).classList.add(&quot;show&quot;);
    document.getElementById('myDropdown').innerHTML = '';
  }
  
  //if dropdown is visible, on off click hide
  window.onclick = function(event) {
    if (!event.target.matches('.dropbutton')) {
      var dropdowns = document.getElementsByClassName(&quot;dropdown-content&quot;);
      var i;
      for (i = 0; i &lt; dropdowns.length; i++) {
        var openDropdown = dropdowns[i];
        if (openDropdown.classList.contains('show')) {
          openDropdown.classList.remove('show');
        }
      }
    }
    //fill value on click and close?         &lt;--------   This is the part I need help with
    if (!event.target.matches('.dropdown-content')) {
      //Get text of clicked option for input and close div
    }
  }
  </code></pre>