title: How can I pass a dynamic variable to function in JS?
body: <p>Attempting to pass ids dynamically breaks function:</p>
  
  <pre><code>&lt;p id="email1" onclick="mailTo(this.id,'com','abc','info','My Website','I have a question for you: ')"&gt;Send us an email&lt;/p&gt;
  &lt;p id="email2" onclick="mailTo(this.id,'org','xyz','support','My Other Website','I want to report a problem with your website.')"&gt;Report Website Problems&lt;/p&gt;
  </code></pre>
  
  <p>Hard coding <code>document.querySelector('#email')</code> is successful, but need id to be dynamic.
  Console prints var correctly.
  Err: <code>qS.addEventListener is not a function.</code></p>
  
  <pre><code>function mailTo(idx, tld, domain, account, site, bodyText) {
    let qS = `document.querySelector('#${idx}')`;
    console.log(qS);
    let arrEmail = [tld, domain, account, site, bodyText];
    const buildEmail = arr =&gt; `${arr[2]}@${arr[1]}.${arr[0]}?subject=From%20the%20${arr[3]}%20website&amp;body=${arr[4]}`;
    qS.addEventListener("click", event =&gt; {
      let str = `mailto:${buildEmail(arrEmail)}`;
      location.href = str;
    });
  }
  </code></pre>
  
  <p>Sandbox: <a href="https://codesandbox.io/s/p8k45v350" rel="nofollow noreferrer">https://codesandbox.io/s/p8k45v350</a></p>