Why i'm getting [object object] using jQuery?

Question

I have a function there i want to try sum two numbers using variable like given below, but i'm getting [object object] instead of total of sum.

 
var convenienceCharge = 100;
var totalPgCost = 500;
var subTotalPgCost = 0;

function totalPgCostFunction() {

subTotalPgCost += $('.subTotalPgCost').text(convenienceCharge +  totalPgCost + 18);

alert(subTotalPgCost);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button onclick="totalPgCostFunction();">Click</button>

Syed mohamed aladeen · Accepted Answer · 2019-05-31 10:30:25Z

2

.text will return a object. that is why you are seeing [object object]

You need to do it like this.

var convenienceCharge = 100;
var totalPgCost = 500;
var subTotalPgCost = 0;

function totalPgCostFunction() {

subTotalPgCost += convenienceCharge +  totalPgCost + 18;

$('.subTotalPgCost').text(subTotalPgCost);
alert(subTotalPgCost);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button onclick="totalPgCostFunction();">Click</button>
<div class="subTotalPgCost"></div>

answered May 31, 2019 at 10:30

Syed mohamed aladeen

6,8134 gold badges36 silver badges60 bronze badges

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

Comments

Rory McCrossan · Accepted Answer · 2019-05-31 10:42:46Z

2

The issue is because when you call the setter of text() it returns a jQuery object, hence the output you see.

To make this work you need to split the calculation and text() logic, like this:

var convenienceCharge = 100;
var totalPgCost = 500;
var subTotalPgCost = 0;

$(function() {
  $('button').click(function() {
    subTotalPgCost += convenienceCharge + totalPgCost + 18;
    $('.subTotalPgCost').text(subTotalPgCost);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button>Click</button>
<div class="subTotalPgCost"></div>

Also note the use of an unobtrusive event handler in this example instead of the outdated on* attribute.

edited May 31, 2019 at 10:42

answered May 31, 2019 at 10:30

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

6 Comments

Andreas Over a year ago

That may be nit-picking, but "...because text() returns a jQuery object..." is only true for the case when calling .text() with an argument.

Rory McCrossan Over a year ago

Nit-picking is good - it ensures accuracy :) and you're right. I've updated the answer to be more clear.

Rory McCrossan Over a year ago

Are you the OP? I am confused. Also, what's the error?

Rory McCrossan Over a year ago

Who are you? You're not the OP, and I'm not going to amend someone's random answer.

Rory McCrossan Over a year ago

The person who asked the question

|

Collectives™ on Stack Overflow

Why i'm getting [object object] using jQuery?

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related