title: HTML - button - onclick in search bar
body: <p>I'm looking for a solution for the following: I have a search bar with the following code:</p>
  
  <pre><code>&lt;input autofocus class="form-control" style="width:40%" type="search" id="myInput" placeholder="Enter keywords here..."&gt;
  </code></pre>
  
  <p>I have several buttons as such:</p>
  
  <pre><code>&lt;input type="button" value="Banana"&gt;
  &lt;input type="button" value="Pear"&gt;
  </code></pre>
  
  <p>What would I need to add in order, so when you click on the Banana button, the word Banana is pasted in the search bar (input id="myInput").</p>
  
  <p>I know you need an onclick="" in the button input and a javascript to paste the text, but what is the function?</p>
  
  <p>EDIT:</p>
  
  <p>I currently already have a listener event:</p>
  
  <pre><code> document.addEventListener('DOMContentLoaded', function() {
    if (document.getElementById("myInput").value.length &gt; 1) {
      document.getElementById("header").className = "hideHeader";
    } else {
      ContactsearchFX();
      document.getElementById('myInput').addEventListener('input', ContactsearchFX);
    }
  });
  </code></pre>
  
  <p>How do I integrate this solution:</p>
  
  <p>HTML</p>
  
  <blockquote>
  <pre><code>&lt;button onclick="addval('Banana')"&gt;Banana&lt;/button&gt;
  &lt;button onClick="addval('Pear')"&gt;Pear&lt;/button&gt;
  </code></pre>
  </blockquote>
  
  <p>Javascript</p>
  
  <pre><code> function setValue(name){
     document.getElementById("myInput").value = name;
  
  }
  </code></pre>