Named Arguments jQuery Function

Question

I would like to pass arguments to a function in a list, without having to keep a certain order and be able to pass only one, or no argument at all and so on.

I think the code is mostly ok, but for some reason I get the message that my arguments are not defined, although the function passes the object with the arguments.

What am I missing?

function positioning(options) {

  var defaults = {
    position: "static",
    background: "lightblue",
    height: "100px"
  };

  var params = $.extend({}, defaults, options);

  var div1 = $('#div1'),
    div2 = $('#div2');

  console.log(options);
  console.log(params);
  console.log("position: " + position);

  div2.css('position', position);
  div2.css('background', background);
  div2.css('height', height);
}

$('button').click(function() {

  positioning({
    height: "200px"
  });
});

#div1 {
  width: 100%;
  height: 100px;
  background: lightgrey;
}
#div2 {
  width: 100%;
  height: 100px;
  background: lightblue;
  top: 0;
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="div1"></div>
<div id="div2"></div>
<button type="button">trigger function</button>

console.log("position: " + params.position);, in your function scope there is no variable named position instead it is a property of the params obejct — Arun P Johny
– Arun P Johny, Commented Apr 15, 2016 at 8:48

Denys Séguret · Accepted Answer · 2016-04-15 08:48:49Z

1

Those aren't variables but properties of the params object.

Change

div2.css('position', position);
div2.css('background', background);
div2.css('height', height);

to

div2.css('position', params.position);
div2.css('background', params.background);
div2.css('height', params.height);

answered Apr 15, 2016 at 8:48

Denys Séguret

384k90 gold badges813 silver badges779 bronze badges

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

1 Comment

Melvin Over a year ago

fantastic, thanks so much for the quick reply, works like a charm! and thanks everyone else!

Arun P Johny · Accepted Answer · 2016-04-15 08:49:24Z

In your function scope there is no variable named position instead it is a property of the params object.

Since the params are css properties, you can use the css variant that takes an object as its value instead of setting each one

function positioning(options) {

  var defaults = {
    position: "static",
    background: "lightblue",
    height: "100px"
  };

  var params = $.extend({}, defaults, options);

  var div1 = $('#div1'),
    div2 = $('#div2');

  console.log(options);
  console.log(params);
  console.log("position: " + params.position);

  div2.css(params);

  //div2.css('position', params.position);
  //div2.css('background', params.background);
  //div2.css('height', params.height);
}

$('button').click(function() {

  positioning({
    height: "200px"
  });
});

#div1 {
  width: 100%;
  height: 100px;
  background: lightgrey;
}
#div2 {
  width: 100%;
  height: 100px;
  background: lightblue;
  top: 0;
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="div1"></div>
<div id="div2"></div>
<button type="button">trigger function</button>

rrk · Accepted Answer · 2016-04-15 08:50:04Z

You just need to use div2.css(params); since the css() function will take an object as an input.

If you want to refer to position or background separately, then you need to use the . operator with param like param.position, param.background etc or use param['position'] or param['background'].

function positioning(options) {

  var defaults = {
    position: "static",
    background: "lightblue",
    height: "100px"
  };

  var params = $.extend({}, defaults, options);

  var div1 = $('#div1'),
    div2 = $('#div2');

  console.log(options);
  console.log(params);
  div2.css(params);
}

$('button').click(function() {

  positioning({
    height: "200px"
  });
});

#div1 {
  width: 100%;
  height: 100px;
  background: lightgrey;
}
#div2 {
  width: 100%;
  height: 100px;
  background: lightblue;
  top: 0;
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="div1"></div>
<div id="div2"></div>
<button type="button">trigger function</button>

Tushar Gupta · Accepted Answer · 2016-04-15 08:49:23Z

Defaults param is an object. Read like :

  console.log("position: " + defaults.position);
  div2.css('position', defaults.position);
  div2.css('background', defaults.background);
  div2.css('height', defaults.height);

function positioning(options) {

  var defaults = {
    position: "static",
    background: "lightblue",
    height: "100px"
  };

  var params = $.extend({}, defaults, options);

  var div1 = $('#div1'),
    div2 = $('#div2');

  console.log(options);
  console.log(params);
  console.log("position: " + defaults.position);

  div2.css('position', defaults.position);
  div2.css('background', defaults.background);
  div2.css('height', defaults.height);
}

$('button').click(function() {

  positioning({
    height: "200px"
  });
});

#div1 {
  width: 100%;
  height: 100px;
  background: lightgrey;
}
#div2 {
  width: 100%;
  height: 100px;
  background: lightblue;
  top: 0;
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="div1"></div>
<div id="div2"></div>
<button type="button">trigger function</button>

Collectives™ on Stack Overflow

Named Arguments jQuery Function

4 Answers 4

1 Comment

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Related