0

I have some numbers inside span in my code that I want to sum. 

<span class="product__description__property order-summary__small-text">
            weight: 0.1 lb
          </span>
<span class="product__description__property order-summary__small-text">
            weight: 0.5 lb
          </span>
<span class="product__description__property order-summary__small-text">
            weight: 0.2 lb
          </span>
           .
           .
           .

I want to sum 0.1 + 0.5 + ... + n= total and store the total in a variable X

Improve this question
1
  • What do you mean? The code is above. It can been calculated by class name of span. I don't know how to do in javascript Commented Dec 8, 2015 at 11:28

3 Answers 3

Reset to default
4

You can use getElementsByClassName() to target all the spans with product__description__property class and regex to extract the number from your string, check example bellow.

Hope this helps.

var spans = document.getElementsByClassName('product__description__property');
var total = 0;

for ( var i=0 ; i<spans.length; i++){
  var span_text = spans[i].textContent;
  var span_number =  parseFloat ( span_text.match(new RegExp("weight: (.*) lb"))[1] );

  total += span_number;
}

document.getElementById('total').textContent = total;
<span class="product__description__property order-summary__small-text">
  weight: 0.1 lb
</span>
<span class="product__description__property order-summary__small-text">
  weight: 0.5 lb
</span>
<span class="product__description__property order-summary__small-text">
  weight: 0.2 lb
</span>
<br>
<br>
Total : <span id='total'></span>

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

3 Comments

Any elegant solution other than split ?
Yes he can use regex instead.
I suppose its better to stay away from the position(index) of the floating value...
1

In case you are using jquery 

var total = 0;
$(".product__description__property").each(function(d) {
  var value = $(this).text().replace("weight: ", "").replace(" lb", "");
  total += +value;
});
document.write("<br/>Total:"+total);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="product__description__property order-summary__small-text">
            weight: 0.1 lb
          </span>
<span class="product__description__property order-summary__small-text">
            weight: 0.5 lb
          </span>
<span class="product__description__property order-summary__small-text">
            weight: 0.2 lb
          </span>

You need to use .each to find your sum and store in a variable, use that variable to display.

Improve this answer

3 Comments

How to put the variable total from the script in the data-checkout-subtotal-price <input class="input-radio" data-checkout-subtotal-price="$TOTAL" />
Ok found it. I changed your code with: document.getElementById('total').textContent = total;
@ArensMyzyri This answer based on jquery so if you want to change data attribute using jquery you should use $('.input-radio').data('checkout-subtotal-price', total);
0

check this fiddle 

var total = 0;
$( ".product__description__property" ).each( function() {  

  var valueArr = $.trim( $( this ).html() ).split( " " ) ;
  console.log( valueArr );
  total += parseFloat( valueArr[ 1 ]);

} );

console.log( total );
Improve this answer

3 Comments

I want the total of the numbers. Not the all string. 0.1+0.5 = 0.6
I think because there's no jquery tag in question, and your answer based on jquery.
@ArensMyzyri "I want the total of the numbers. Not the all string. 0.1+0.5 = 0.6" which is what I have done. Did you checked the fiddle?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.