CODEWITHSUNDEEP
javascriptjquery
Behseini
Behseini

Reputation: 6320

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

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.

Upvotes: 0

Views: 93

Answers (2)

printfmyname
printfmyname

Reputation: 971

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... :)

Upvotes: 1

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

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">

Upvotes: 1

Related Questions