use .html() inside .html() with jquery

Question

Have little calculation:

$('.sum-value').html(
    ($('.one-value').html()) * ($('.another-value').html())
    );

Want to calculate out of .one-value and .another-value. These values are numbers inside a html span with the corresponding class. So if I echo these two I get a single number. And add the sum to .sum-value.

Is this possible or do i have to dump .one-value and .another-value to a var. Actually it doesn't work, but I also get no error in the console.

Any suggestions?

html will return any html tag, I suggest to use text() instead, plus add a parseInt — BeNdErR
– BeNdErR, Commented Jun 18, 2013 at 9:45
No, you don't have to use variables. Please post more of your code and the HTML and create a jsfiddle demo. Your code works fine for me: jsfiddle.net/qt8ve. — Felix Kling
– Felix Kling, Commented Jun 18, 2013 at 9:46
it's working fine to me. Here's my experiment jsfiddle.net/vonDy2791/btGmU — Vond Ritz
– Vond Ritz, Commented Jun 18, 2013 at 9:47

David Thomas · Accepted Answer · 2013-06-18 10:11:38Z

3

I'd suggest:

$('.sum-value').text(function(){
    var v1 = parseFloat($('.one-value').text()) || 0,
        v2 = parseFloat($('.another-value').text()) || 0;
    return v1 * v2;
});

We're using parseFloat() because we want to use the number contained within the value property, and we can't be sure it's an integer (in which case parseInt() would be more appropriate).

We're also using || 0 to guarantee that there is a number (in case, for example, the element is empty or holds a non-numeric value).

References:

parseFloat().
text().

edited Jun 18, 2013 at 10:11

answered Jun 18, 2013 at 9:45

David Thomas

254k53 gold badges382 silver badges421 bronze badges

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

2 Comments

Felix Kling Over a year ago

"These values are numbers inside a html span with the corresponding class."

David Thomas Over a year ago

@Felix: then the question was edited, I think; that wasn't there on the first reading. Also, updated to reflect the use of text() in place of val().

David Thomas · Accepted Answer · 2013-06-18 10:03:40Z

2

convert them into numbers

 $('.sum-value').html(
 parseInt($('span.one-value').text()) * parseInt(($('span.another-value').text()))
);

FIDDLE.

edited Jun 18, 2013 at 10:03

David Thomas

254k53 gold badges382 silver badges421 bronze badges

answered Jun 18, 2013 at 9:56

user2404546

Comments

Mohamed AbdElRazek · Accepted Answer · 2013-06-18 09:46:43Z

0

Try this:

$('.sum-value').text(parseInt($('.one-value').text()) * parseInt($('.another-value').text()));

answered Jun 18, 2013 at 9:46

Mohamed AbdElRazek

1,68414 silver badges18 bronze badges

Comments

Adil Shaikh · Accepted Answer · 2013-06-18 09:52:26Z

0

$('.sum-value').html(function () {
    var n1 = parseFloat($.trim($('.one-value').text()));
    var n2 = parseFloat($.trim($('.another-value').text()));
    return n1 * n2;
});

edited Jun 18, 2013 at 9:52

answered Jun 18, 2013 at 9:46

Adil Shaikh

44.8k17 gold badges95 silver badges112 bronze badges

Collectives™ on Stack Overflow

use .html() inside .html() with jquery

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related