Jquery, ajax, javascript - getting an element by id - Stack Overflow

admin管理员组

文章数量:1130349

I have some ajax onclick stuff that updates this line when the value is selected from the menu:

<li id="li_273" data-pricefield="special" data-pricevalue="0" >

The intention is to take the that value (data-pricevalue) and then multiple it by the amount that is entered from another input box. Here's my function to try to make that happen:

$('#main_body').delegate('#element_240','keyup', function(e){

var temp = $(this).attr("id").split('_');
var element_id = temp[1];

var price = $('#li_273').data("pricevalue"); 

var ordered = $(this).val();

var price_value = price * ordered;

price_value = parseFloat(price_value);
if(isNaN(price_value)){
    price_value = 0;
}

$("#li_273").data("pricevalue",price_value);
calculate_total_payment();  

});

Except I get the following error: Uncaught TypeError: Cannot call method 'data' of null

It appears as tho my attempt to get the price value out of getElementById isn't correct. Any suggestions?

UPDATE: The code above has been edited from your suggestions and thanks to all. It appears to be working just fine now.

I have some ajax onclick stuff that updates this line when the value is selected from the menu:

<li id="li_273" data-pricefield="special" data-pricevalue="0" >

The intention is to take the that value (data-pricevalue) and then multiple it by the amount that is entered from another input box. Here's my function to try to make that happen:

$('#main_body').delegate('#element_240','keyup', function(e){

var temp = $(this).attr("id").split('_');
var element_id = temp[1];

var price = $('#li_273').data("pricevalue"); 

var ordered = $(this).val();

var price_value = price * ordered;

price_value = parseFloat(price_value);
if(isNaN(price_value)){
    price_value = 0;
}

$("#li_273").data("pricevalue",price_value);
calculate_total_payment();  

});

Except I get the following error: Uncaught TypeError: Cannot call method 'data' of null

It appears as tho my attempt to get the price value out of getElementById isn't correct. Any suggestions?

UPDATE: The code above has been edited from your suggestions and thanks to all. It appears to be working just fine now.

• javascript
• jquery

Share Improve this question Follow edited Dec 22, 2012 at 2:53 MrTechie asked Dec 22, 2012 at 2:19 MrTechieMrTechie 1,84766 gold badges2121 silver badges3636 bronze badges 6

• 2 Note that delegate() is deprecated, use on() instead – Christophe Commented Dec 22, 2012 at 2:23
• @Christophe true, depending on what version the OP is using. – wakooka Commented Dec 22, 2012 at 2:25
• 2 @Christophe: As of jQuery 1.7, .delegate() has been superseded by the .on() method Delegate() has not been marked as deprecated yet. See features marked as deprecated: api.jquery.com/category/deprecated .There is a difference between superseded and deprecated. Features marked as deprecated may get removed in any new version while superseded features are not. – Nope Commented Dec 22, 2012 at 2:27
• When I tried to use the .on method I caught errors but the delegate works. – MrTechie Commented Dec 22, 2012 at 2:37
• 1 @Christophe: Also, as an interesting side-note. In the later versions of jQuery it doesn't actually matter at all if you are using delegate, live (deprecated), bind, etc.. as those methods have been re-written to use on() anyway. 1.7.1 source for example: delegate: function( selector, types, data, fn ) {return this.on( types, selector, data, fn);}, or bind: function( types, data, fn ) {return this.on(types, null, data, fn );}, However, one should always follow the recommendations given by the documentation to prevent any unexpected issues. – Nope Commented Dec 22, 2012 at 2:58

 |  Show 1 more comment

7 Answers 7

Sorted by: Reset to default 7

This part is wrong:

var price = document.getElementById('#li_273').data("pricevalue").val();

Instead, you should use jQuery all the way here:

var price = $('#li_273').data("pricevalue"); 

Btw, you shouldn't use .val() because .data() already returns a string. .val() is used exclusively for input elements such as <input> and <select> to name a few.

Update

Also, the rest of your code should be something like this:

var price_value = parseFloat(price);
if(isNaN(price_value)){
    price_value = 0;
}

getElementById doesn't return a jQuery object it returns just a normal DOM object.

You can wrap any DOM object in a jQuery call to get it as a jQuery object:

 $(document.getElementById("li_273")).data("pricevalue").val();

Or better yet just use jQuery

 $("#li_273").data("pricevalue").val()

Your call should be document.getElementById('li_273') it's a normal method and doesn't require the hash as jQuery does.

EDIT As @kennypu points out you're then using jQuery on a non jQuery object. @Craig has the best solution.

document.getElementById('#li_273').data("pricevalue").val(); should be jQuery('#li_273').data("pricevalue").val();

Again the variable price_value is not present, I think you mean price.

Ex:

$('#main_body').delegate('#element_240','keyup mouseout change', function(e){

    var temp = $(this).attr("id").split('_');
    var element_id = temp[1];

    var price = $('#li_273').data("pricevalue").val();

    var ordered = $(this).val();

    var price_value = parseFloat(price);
    if(isNaN(price_value)){
        price_value = 0;
    }

    $("#li_273").data("pricevalue",price_value);
    calculate_total_payment();          
}); 

The document.getElementById('#li_273') is the problem. The method won't recognize the hash. If you want to get the element ID using that method try document.getElementById('li_273') and it will work.

Otherwise use all jQuery.

Since you're using jQuery, why are you using document.getElementById instead of $(...)? It should be:

$('#li_273').data("pricevalue")

Note also that the data() method is only defined on jQuery objects, not DOM elements. And you don't need to call val() after it -- that's for getting the value of form elements.

Your getElementById is wrong with javascript you do not need the #, if your using jQuery do it like this instead (Also I removed the .val() because its not needed):

$('#main_body').delegate('#element_240','keyup mouseout change', function(e){

    var temp = $(this).attr("id").split('_');
    var element_id = temp[1];

    var price = $('#li_273').data("pricevalue");

    var ordered = $(this).val();

    price_value = parseFloat(price_value);
    if(isNaN(price_value)){
        price_value = 0;
    }

    $("#li_273").data("pricevalue",price_value);
    calculate_total_payment();          
}); 

I have some ajax onclick stuff that updates this line when the value is selected from the menu:

<li id="li_273" data-pricefield="special" data-pricevalue="0" >

The intention is to take the that value (data-pricevalue) and then multiple it by the amount that is entered from another input box. Here's my function to try to make that happen:

$('#main_body').delegate('#element_240','keyup', function(e){

var temp = $(this).attr("id").split('_');
var element_id = temp[1];

var price = $('#li_273').data("pricevalue"); 

var ordered = $(this).val();

var price_value = price * ordered;

price_value = parseFloat(price_value);
if(isNaN(price_value)){
    price_value = 0;
}

$("#li_273").data("pricevalue",price_value);
calculate_total_payment();  

});

Except I get the following error: Uncaught TypeError: Cannot call method 'data' of null

It appears as tho my attempt to get the price value out of getElementById isn't correct. Any suggestions?

UPDATE: The code above has been edited from your suggestions and thanks to all. It appears to be working just fine now.

I have some ajax onclick stuff that updates this line when the value is selected from the menu:

<li id="li_273" data-pricefield="special" data-pricevalue="0" >

The intention is to take the that value (data-pricevalue) and then multiple it by the amount that is entered from another input box. Here's my function to try to make that happen:

$('#main_body').delegate('#element_240','keyup', function(e){

var temp = $(this).attr("id").split('_');
var element_id = temp[1];

var price = $('#li_273').data("pricevalue"); 

var ordered = $(this).val();

var price_value = price * ordered;

price_value = parseFloat(price_value);
if(isNaN(price_value)){
    price_value = 0;
}

$("#li_273").data("pricevalue",price_value);
calculate_total_payment();  

});

Except I get the following error: Uncaught TypeError: Cannot call method 'data' of null

It appears as tho my attempt to get the price value out of getElementById isn't correct. Any suggestions?

UPDATE: The code above has been edited from your suggestions and thanks to all. It appears to be working just fine now.

• javascript
• jquery

Share Improve this question Follow edited Dec 22, 2012 at 2:53 MrTechie asked Dec 22, 2012 at 2:19 MrTechieMrTechie 1,84766 gold badges2121 silver badges3636 bronze badges 6

• 2 Note that delegate() is deprecated, use on() instead – Christophe Commented Dec 22, 2012 at 2:23
• @Christophe true, depending on what version the OP is using. – wakooka Commented Dec 22, 2012 at 2:25
• 2 @Christophe: As of jQuery 1.7, .delegate() has been superseded by the .on() method Delegate() has not been marked as deprecated yet. See features marked as deprecated: api.jquery.com/category/deprecated .There is a difference between superseded and deprecated. Features marked as deprecated may get removed in any new version while superseded features are not. – Nope Commented Dec 22, 2012 at 2:27
• When I tried to use the .on method I caught errors but the delegate works. – MrTechie Commented Dec 22, 2012 at 2:37
• 1 @Christophe: Also, as an interesting side-note. In the later versions of jQuery it doesn't actually matter at all if you are using delegate, live (deprecated), bind, etc.. as those methods have been re-written to use on() anyway. 1.7.1 source for example: delegate: function( selector, types, data, fn ) {return this.on( types, selector, data, fn);}, or bind: function( types, data, fn ) {return this.on(types, null, data, fn );}, However, one should always follow the recommendations given by the documentation to prevent any unexpected issues. – Nope Commented Dec 22, 2012 at 2:58

 |  Show 1 more comment

7 Answers 7

Sorted by: Reset to default 7

This part is wrong:

var price = document.getElementById('#li_273').data("pricevalue").val();

Instead, you should use jQuery all the way here:

var price = $('#li_273').data("pricevalue"); 

Btw, you shouldn't use .val() because .data() already returns a string. .val() is used exclusively for input elements such as <input> and <select> to name a few.

Update

Also, the rest of your code should be something like this:

var price_value = parseFloat(price);
if(isNaN(price_value)){
    price_value = 0;
}

getElementById doesn't return a jQuery object it returns just a normal DOM object.

You can wrap any DOM object in a jQuery call to get it as a jQuery object:

 $(document.getElementById("li_273")).data("pricevalue").val();

Or better yet just use jQuery

 $("#li_273").data("pricevalue").val()

Your call should be document.getElementById('li_273') it's a normal method and doesn't require the hash as jQuery does.

EDIT As @kennypu points out you're then using jQuery on a non jQuery object. @Craig has the best solution.

document.getElementById('#li_273').data("pricevalue").val(); should be jQuery('#li_273').data("pricevalue").val();

Again the variable price_value is not present, I think you mean price.

Ex:

$('#main_body').delegate('#element_240','keyup mouseout change', function(e){

    var temp = $(this).attr("id").split('_');
    var element_id = temp[1];

    var price = $('#li_273').data("pricevalue").val();

    var ordered = $(this).val();

    var price_value = parseFloat(price);
    if(isNaN(price_value)){
        price_value = 0;
    }

    $("#li_273").data("pricevalue",price_value);
    calculate_total_payment();          
}); 

The document.getElementById('#li_273') is the problem. The method won't recognize the hash. If you want to get the element ID using that method try document.getElementById('li_273') and it will work.

Otherwise use all jQuery.

Since you're using jQuery, why are you using document.getElementById instead of $(...)? It should be:

$('#li_273').data("pricevalue")

Note also that the data() method is only defined on jQuery objects, not DOM elements. And you don't need to call val() after it -- that's for getting the value of form elements.

Your getElementById is wrong with javascript you do not need the #, if your using jQuery do it like this instead (Also I removed the .val() because its not needed):

$('#main_body').delegate('#element_240','keyup mouseout change', function(e){

    var temp = $(this).attr("id").split('_');
    var element_id = temp[1];

    var price = $('#li_273').data("pricevalue");

    var ordered = $(this).val();

    price_value = parseFloat(price_value);
    if(isNaN(price_value)){
        price_value = 0;
    }

    $("#li_273").data("pricevalue",price_value);
    calculate_total_payment();          
}); 

本文标签： jQueryAjaxjavascriptgetting an element by idStack Overflow