How to pass input element into a function to get data attribute

Question

I am working on the below demo. Why am I not able to pass the $("#sample") into a function like below functions?

function GetAtts(elem) {
  var x = elem.data('x');
  var y = elem.data('y');
 
 console.log(x + ' ' + y); 
}


function GetAttsThis(elem) {
  var x = this.data('x');
  var y = this.data('y');
 
 console.log(x + ' ' + y); 
}

GetAtts('sample');
GetAtts('$("#sample")');
GetAttsThis('sample');

Here is the demo:

function GetAtts(elem) {
  var x = elem.data('x');
  var y = elem.data('y');

  console.log(x + ' ' + y);
}


function GetAttsThis(elem) {
  var x = this.data('x');
  var y = this.data('y');

  console.log(x + ' ' + y);
}

GetAtts('sample');
GetAtts('$("#sample")');
GetAttsThis('sample');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="sample" type="text" data-x="5" data-y="20">

As you can see I am getting:

Uncaught TypeError: elem.data is not a function

and:

Uncaught TypeError: this.data is not a function

on both formats of functions.

If you pass an argument that is in quotes, you are passing a string. — Scott Marcus
– Scott Marcus, Commented Aug 18, 2018 at 14:49

Zakaria Acharki · Accepted Answer · 2018-08-18 14:53:30Z

1

You've to pass the object like :

GetAtts($("#sample"));

The this keyword doesn't refer to the input since you're using it without a specific context.

You could use the .apply() method instead to set this to $("#sample") within the function's scope, like :

GetAttsThis.apply($("#sample"));

function GetAtts(elem) {
  var x = elem.data('limitn');
  var y = elem.data('limitp');

  console.log(x + ' ' + y);
}

function GetAttsThis() {
  var x = this.data('limitn');
  var y = this.data('limitp');

  console.log(x + ' ' + y);
}

GetAtts($("#sample"));
GetAttsThis.apply($("#sample"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="sample" type="text" data-limitn="5" data-limitp="20">

edited Aug 18, 2018 at 14:53

answered Aug 18, 2018 at 14:47

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

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

Comments

printfmyname · Accepted Answer · 2018-08-18 14:55:36Z

You actually almost had it. on your GetAtts('$("#sample")'); you need to remove the single quotations. That will make the $("#sample") select the actual element, and that get passed to the GetAtts function.

function GetAtts(elem) {
    var x = elem.data('x'); // Your attribute data has property x and y. It doesnt have limitn, and limitp
    var y = elem.data('y'); 
    console.log(x + ' ' + y); 
}

function GetAttsThis(elem) {
    var val = eval(elem);
    var x = val.data('x');
    var y = val.data('y'); 
}

// You need to pass in the actual jQuery element
GetAtts($("#sample"));
GetAttsThis('$("#sample")');
// GetAtts('sample'); // This will not work. THis will pass a string
// GetAtts('$("#sample")'); // This will not work. THis will pass a string that represent working code. All you have to do here is remove surrounding single quotations
// GetAttsThis('sample'); // This will not work. THis will pass a string

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="sample" type="text"  data-x="5" data-y="20">

FYI:

If you really want to send a string to the argument, I fixed your code on GetAttsThis function. I use eval() to evaluate input string. Thats not very good way to code, but just thought you might enjoy it... :)

Collectives™ on Stack Overflow

How to pass input element into a function to get data attribute

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related