How can I pass a dynamic variable to function in JS?

Question

Attempting to pass ids dynamically breaks function:

<p id="email1" onclick="mailTo(this.id,'com','abc','info','My Website','I have a question for you: ')">Send us an email</p>
<p id="email2" onclick="mailTo(this.id,'org','xyz','support','My Other Website','I want to report a problem with your website.')">Report Website Problems</p>

Hard coding document.querySelector('#email') is successful, but need id to be dynamic. Console prints var correctly. Err: qS.addEventListener is not a function.

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 => `${arr[2]}@${arr[1]}.${arr[0]}?subject=From%20the%20${arr[3]}%20website&body=${arr[4]}`;
  qS.addEventListener("click", event => {
    let str = `mailto:${buildEmail(arrEmail)}`;
    location.href = str;
  });
}

Sandbox: https://codesandbox.io/s/p8k45v350

1. qS is a string, 2. Why would you add a new click event handler in a click event handler named mailTo? O.o — Andreas
– Andreas, Commented Feb 20, 2019 at 16:53
Right. eListener was for a single instance with the id hard-coded. Function re-written with eListener method removed. — eYeOpeners
– eYeOpeners, Commented Mar 1, 2019 at 22:53

danh · Accepted Answer · 2019-02-20 16:54:16Z

2

Build just the selector param dynamically...

let qS = document.querySelector(`#${idx}`);

answered Feb 20, 2019 at 16:54

danh

62.7k10 gold badges100 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

pouyan · Accepted Answer · 2019-02-20 16:53:33Z

2

This will help you:

function mailTo(...items)
{
console.log(items[0].id);
}

<p id="email1" onclick="mailTo(this,'com','abc','info','My Website','I have a question for you: ')">Send us an email</p>
<p id="email2" onclick="mailTo(this,'org','xyz','support','My Other Website','I want to report a problem with your website.')">Report Website Problems</p>

answered Feb 20, 2019 at 16:53

pouyan

3,4594 gold badges29 silver badges49 bronze badges

6 Comments

Andreas Over a year ago

What is the problem with the code? What have you changed, and why would this help?

pouyan Over a year ago

@Andreas, Sorry. in my solution, instead of passing the id of the element into the function and retrieve the element using it's id, I pass the element it self into the function and it will enables me to use the element or even it's id inside the function easily.

pouyan Over a year ago

Can you explain the problem, maybe I didn't get the question point.

Andreas Over a year ago

The problem is the line let qS = ... and not how to get the id (directly as parameter or from the passed element)

pouyan Over a year ago

@Andreas, So I think that line of code is trying to retrieve the selected element. Am I wrong?

|

Beatinu · Accepted Answer · 2019-02-20 17:03:33Z

0

If you change

    let qS = `document.querySelector('#${idx}')`;

to

    let qS = this;

your code works. But you don't need to supply the id to query for the element since you can access it with this.

answered Feb 20, 2019 at 17:03

Beatinu

114 bronze badges

1 Comment

eYeOpeners Over a year ago

this loads the DOM so every click thereafter reinitiates the function.

Collectives™ on Stack Overflow

How can I pass a dynamic variable to function in JS?

3 Answers 3

Comments

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related