Passing argument to the function inside the object in Javascript

Question

I'm quite sure this question has been asked before, but I couldn't find anything related to my case.

Here's my function

function change(prop) {
    document
      .querySelector("img")
      .style.setProperty(`--${prop}`, `${this.value}px`);
  }

  spacing.onchange = change;
  blur.onchange = change;

I'm struggling with passing argument to change function, because if I do spacing.onchange = change("prop") the function will be executed immediately. I want to avoid using addEventListener. So here's the question, how can I pass an argument to my function?

You need to have a higher order function in your code so that solves your problem — Saadi Toumi Fouad
– Saadi Toumi Fouad, Commented Jul 29, 2020 at 23:38

Saadi Toumi Fouad · Accepted Answer · 2020-07-29 23:44:31Z

2

You can solve that by using high order function feature

function change(prop) {
  return function() {
    document
      .querySelector("img")
      .style.setProperty(`--${prop}`, `${this.value}px`);
  }
}

// for example
spacing.onchange = change(/*Your prop*/);
blur.onchange = change(/*Your prop*/);

answered Jul 29, 2020 at 23:44

Saadi Toumi Fouad

2,8322 gold badges7 silver badges20 bronze badges

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

2 Comments

Bakhodir Over a year ago

Thank you that really helped. I think it is the most convinient way of doing that

Saadi Toumi Fouad Over a year ago

Yes it's the common way JavaScript developers do in this case

GirkovArpa · Accepted Answer · 2020-07-29 23:38:01Z

1

spacing.onchange = change.bind(spacing, 'prop');

answered Jul 29, 2020 at 23:38

GirkovArpa

5,1015 gold badges19 silver badges52 bronze badges

Comments

Mick · Accepted Answer · 2020-07-29 23:39:39Z

0

Try setting the variable equal to the function definition.

spacing.onchange = function change(prop) {
    document
      .querySelector("img")
      .style.setProperty(`--${prop}`, `${this.value}px`);
  }

spacing.onchange(arg);

edited Jul 29, 2020 at 23:39

answered Jul 29, 2020 at 23:35

Mick

7964 silver badges8 bronze badges

1 Comment

Bakhodir Over a year ago

Thank you, but imagine having 100 object like spacing. Adding function manually to every one of them is tough

Talmacel Marian Silviu · Accepted Answer · 2020-07-29 23:46:35Z

0

Try this:

function onChanges (variables,props) {
variables.forEach((variable, index) => {
variable.onChange=function(event){
    return change(props[index]);
}
});
}

onChanges([spacing,blur],[prop1,prop2]);

answered Jul 29, 2020 at 23:46

Talmacel Marian Silviu

1,7762 gold badges10 silver badges15 bronze badges

Collectives™ on Stack Overflow

Passing argument to the function inside the object in Javascript

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related