Get access of DOM element on other function by this in jquery

Question

I have a button

<button type="button" data-id="5" class="get_attr" >Click Me</button>

and i want to get the data-id value then i write the code

<script type="text/javascript">
    $(".get_attr").on("click",function(){
        var id = $(this).data("id");
        console.log("id = "+id);  //id = 5
    });
</script>

Suppose I want this value, or do any functionality on this button from another function if i call function from this code like and I want like this:

<script type="text/javascript">
    $(".get_attr").on("click",function(){
        updateValue(this);
    });

    function updateValue(this){ // it will take it as a parameter
        var id = $(this).data("id");
        console.log("id = "+id);  //id = 5
    }
</script>

possible duplicate of https://stackoverflow.com/questions/5309926/how-to-get-the-data-id-attribute — Mayank Singh Fartiyal, Nov 10 '17 at 10:26
Possible duplicate of [How to get the data-id attribute?](https://stackoverflow.com/questions/5309926/how-to-get-the-data-id-attribute) — Mayank Singh Fartiyal, Nov 10 '17 at 10:27
you can't have a parameter called `this` - debugging 101: in your **developer** tools console, you'd see an error about this — Jaromanda X, Nov 10 '17 at 10:35

score 4 · Accepted Answer · answered Nov 10 '17 at 10:30

You can not use 'this' becasue it is Javascript keyword

<script type="text/javascript">
$(".get_attr").on("click",function(){
    updateValue(this);
});

function updateValue(abc){ // it will take it as a parameter
    var id = $(abc).data("id");
    console.log("id = "+id);  //id = 5
}

Now its work fine...

Mamun · Answer 2 · 2017-11-10T10:33:04.687

Being this is a reserved word, change the parameter name from this to some other like in updateValue(thatObj).

$(".get_attr").on("click",function(){
  updateValue(this);
});

function updateValue(thatObj){
  var id = $(thatObj).data("id");
  console.log("id = "+id);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" data-id="5" class="get_attr" >Click Me</button>

score 1 · Answer 3 · answered Nov 10 '17 at 10:26

You cannot use a reserved keyword in your function definition. It should work with simply using another name in the definition.

<script type="text/javascript">
        $(".get_attr").on("click",function(){
            updateValue(this);
        });

        function updateValue(originalObject){ // it will take it as a parameter
            var id = $(this).data("id");
            console.log("id = "+id);  //id = 5
        }
    </script>

score 1 · Answer 4 · answered Nov 10 '17 at 10:29

Try this

    $(".get_attr").on("click",function(){
        var id = $(this).data("id");
        console.log("id = "+id);  //id = 5
    });



    $(".get_attr").on("click",function(){
        updateValue(this);
    });

    function updateValue(x){ // it will take it as a parameter
       var id = $(x).data("id");
        console.log("id = "+id);  //id = 5
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button type="button" data-id="5" class="get_attr" >Click Me</button>

Get access of DOM element on other function by this in jquery

4 Answers4