title: Passing string into an event listener function
body: <p>I am trying to copy some text to a clipboard upon clicking a button. Currently, its working when I have a separate function to copy different sections of the HTML that I want to copy, however when I write 1 function for both with a parameter it doesn't work.</p>
  
  <p>I have 2 functions which look like this</p>
  
  <pre><code>function copyStringToClipboardA () {
    // Create new element
    var el = document.createElement('input');
    // Set value (string to be copied)
    el.value = document.getElementById("trackEvent").value;
    // Set non-editable to avoid focus and move outside of view
    el.setAttribute('readonly', '');
    el.style = {position: 'absolute', left: '-9999px'};
    document.body.appendChild(el);
    // Select text inside element
    el.select();
    // Copy text to clipboard
    document.execCommand('copy');
    // Remove temporary element
    document.body.removeChild(el);
  }
  
  function copyStringToClipboardB() {
    // Create new element
    var el = document.createElement('input');
    // Set value (string to be copied)
    el.value = document.getElementById("identifyEvent").value;
    // Set non-editable to avoid focus and move outside of view
    el.setAttribute('readonly', '');
    el.style = {position: 'absolute', left: '-9999px'};
    document.body.appendChild(el);
    // Select text inside element
    el.select();
    // Copy text to clipboard
    document.execCommand('copy');
    // Remove temporary element
    document.body.removeChild(el);
  }
  </code></pre>
  
  <p>The only thing that is different in those 2 functions is <code>el.value</code></p>
  
  <p>I call these 2 functions on a button click which looks like this:</p>
  
  <pre><code>document.addEventListener("DOMContentLoaded", function(event){
  //Event Examples
      var b = document.getElementById('trackCopy');
      var c = document.getElementById('identifyCopy');
  
      b.addEventListener('click', copyStringToClipboardA, false);
      c.addEventListener('click', copyStringToClipboardB, false)
  });
  </code></pre>
  
  <p>I am trying to write 1 function that takes a string as a parameter instead of writing 2 functions.
  I tried writing the following function which takes a string as a parameter:</p>
  
  <pre><code>function copyStringToClipboard(myInput) {
    // Create new element
    var el = document.createElement('input');
    // Set value (string to be copied)
    el.value = document.getElementById(myInput).value;
    // Set non-editable to avoid focus and move outside of view
    el.setAttribute('readonly', '');
    el.style = {position: 'absolute', left: '-9999px'};
    document.body.appendChild(el);
    // Select text inside element
    el.select();
    // Copy text to clipboard
    document.execCommand('copy');
    // Remove temporary element
    document.body.removeChild(el);
  }
  </code></pre>
  
  <p>and then I call it on click like this:</p>
  
  <pre><code>document.addEventListener("DOMContentLoaded", function(event){
  //Event Examples
      var b = document.getElementById('trackCopy');
      var c = document.getElementById('identifyCopy');
  
      b.addEventListener('click', copyStringToClipboard("trackEvent"), false);
      c.addEventListener('click', copyStringToClipboard("identifyEvent"), false)    
  });
  </code></pre>
  
  <p>The issue I have with this implementation is that the second one <code>identifyEvent</code> is copied every time. </p>
  
  <p>The behavior I want to achieve is copying the selected text into the clipboard.</p>