Getting a weird number when getting an access to ID attibute of input tag

Question

I'd like to get a value of id attribute for an input tag.

<input type="text" id="heading1" class="alert-heading" value="aaa" />

In order to to this, I wrote this code.

var alertHeading = $(".alert-heading");

alertHeading.on('blur', function(){
    var headingId = $(this).attr("id");
    console.log(headingId); // outputs 2943. I'm expecting "heading1".
});

But, I get a weird number when I get an access to id although I'm expecting to get a "heading1".

This is the code that I'm working on right now.

var alertHeading = $(".alert-heading");

alertHeading.on('blur', function(){

    var key = alertMode.val();

    chrome.runtime.getBackgroundPage(function(backgroundPage) {

        var background = backgroundPage.background;

        var alertObject = background.getStorage(key);

        //(EDITED)Oh I think $(this)here no longer points to the input element!!
        var headingId = $(this).attr("id");

        console.log(headingId); // outputs 2943. I'm expecting "heading1".

    });

})

Please help me out to solve this problem. Thanks in advance!

Replace `$(this)` by `$(".alert-heading")`, as `$(this)` is probably not what you think it is — , Sep 14 '13 at 04:28
By the way `$alertHeading` is a nice var name because it notes that it is a jquery object. — m59, Sep 14 '13 at 04:29
Have you checked it properly ? because when i m trying its working fine and give me output as you want. wrap your code inside `$(document).ready()` — Devang Rathod, Sep 14 '13 at 04:34

score 3 · Accepted Answer · edited May 23 '17 at 10:25

Explaining this in ECMAScript terms, every time control enters a function a new Execution Context is created. Each execution context has its own thisBinding, hence you need to store a reference to the outer context's this reference so that you can access it through lexical scope.

alertHeading.on('blur', function(){
    //[...]
    var el = this; //copy the `this` reference to a variable
    chrome.runtime.getBackgroundPage(function(backgroundPage) {
        // [...]
        var headingId = el.id; //access outer scope's this

    });
});

I'm using el.id which access the id property of the DOM element referenced by el. It is good practice to work with the DOM instead of HTML attributes whenever you can.

The lexical scope trick is the most common approach but there are several ways to fix this.

In ES5, it is also possible to .bind() the this reference of a function object:

alertHeading.on('blur', function(){
    chrome.runtime.getBackgroundPage(function(backgroundPage) {
        // [...]
        var headingId = this.id; //2. Now it has the same this as outer scope

    }.bind(this)); //1. The onblur's `this` is bound to the bgpage callback
});

+1 for pointing out good practice with `DOMElement.id` property. — skmasq, Sep 14 '13 at 04:38

score 2 · Answer 2 · answered Sep 14 '13 at 04:30

2

You need to save this in a closure variable:

alertHeading.on('blur', function(){

    var key = alertMode.val();
    var that = this;

    chrome.runtime.getBackgroundPage(function(backgroundPage) {
        var background = backgroundPage.background;
        var alertObject = background.getStorage(key);
        var headingId = that.id;
        console.log(headingId);
    });
});

answered Sep 14 '13 at 04:30

Barmar

741,623
53
500
612

Instead of `$(that).attr("id");` use `that.id;` – Tushar Gupta - curioustushar Sep 14 '13 at 04:31

Getting a weird number when getting an access to ID attibute of input tag

2 Answers2