Javascript calculate all values from HTML list

Question

I'm developing budget diary web app and have problems with frontend, I have problems with updating budget . Here is my code for Income:

script.js

var sum =0;
 $('#li-income-val').each(function() {
  sum += Number($(this).text());

});
$("#budget-income").text(sum)

html code

  <li id="li-icnome">
    <p class="dashboard__income__text">
        {{incom.title}}
    </p>
    <p id="li-income-val">{{incom.value}}</p>
    </p>
</li>

Is there any solutions ?

You've not really described the problem here, only told us that you have one. What is it? That being said, it looks like you're repeating the same id on all the li and p elements which is invalid; they have to be unique in the DOM. Change it to a class. — Rory McCrossan
– Rory McCrossan, Commented Feb 22, 2020 at 20:56

harsh_apache · Accepted Answer · 2020-02-22 21:04:10Z

1

First of all Use class instead of id (id should be one)

HTML

<li class="li-icnome">
  <p class="dashboard__income__text">
    {{incom.title}}
  </p>
  <p class="li-income-val">{{incom.value}}</p>
</li>

JS

  var sum =0;
  $('.li-income-val').each(function() {
   sum = sum + parseInt($(this).text());
  });
  $("#budget-income").text(sum);

answered Feb 22, 2020 at 21:04

harsh_apache

4334 silver badges10 bronze badges

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

Collectives™ on Stack Overflow

Javascript calculate all values from HTML list

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related