javascript - How to fix sum of multiple input fields if same class in one <td contenteditable> not <td><input>

Question

I can't sum on table td "jumlah" for "total"

<script>
$(document).on("change", ".jumlah", function() {
    var sum = 0;
    $(".jumlah").each(function(){
        sum += +$(this).val();
    });
    $(".total").val(sum);
});
</script>

<input type="text" id="total" class="total" value=""  />

I expect the output for total from jumlah

Answer 1

Elements with the [contenteditable] attribute will not have a [value] attribute because:

1. Only non-interactive, non-void, flow and phrase elements like <div></div>, <section></section>, <spab></span> etc. can have [contenteditable].
2. Only form controls such as <input>, <textarea>, <output>, etc. can have the [value] attribute.

So instead of .val() use .text() since text is the content between the tags of non-form controls. The important change is a ternary:

if this is an input get its value otherwise get its text

sum += $(this).is('input') ? +$(this).val() : +$(this).text(); 

The minor changes are:

• input event instead of change because it looks slick.
• The form is registered to the input event instead of document.

$('.totals').on("input", ".subtotal", function() {
  let sum = 0;
  $(".subtotal").each(function(){
    sum += $(this).is('input') ? +$(this).val() : +$(this).text();
  });
  $(".total").val(sum);
});

:root {font:700 16px/1.2 Consolas}
input, output, data {display:inline-block;font:inherit;text-align:right;width:125px;}
output, data {width:50px}
data {outline:1px solid #aaa;padding:2px 17px 2px 0px;margin:1px 0px 1px 2px;width:110px}

<form class='totals'>
  <table>
  <tr><td><input class="subtotal" type='number' value='0'></td></tr>
  <tr><td><input class="subtotal" type='number' value='0'></td></tr>
  <tr><td><input class="subtotal" type='number' value='0'></td></tr>
  <tr><td><data class="subtotal" contenteditable>0</data></td></tr>
  <tr><td><data class="subtotal" contenteditable>0</data></td></tr>
  <tr><td><data class="subtotal" contenteditable>0</data></td></tr>
  <tr><td>Total: <output class="total">0</output></td></tr>
  </table>
 </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>