Can't Calculate Automatically Javascript with Dropdown not Typing the number

Question

How to calculate A vertically and B vertically from dropdown combo box

            Data
               A      B  
----------------------------
    1      |   1   |  0
    2      |   0   |  1
    3      |   0   |  1
----------------------------
    Result |   1   |  2  (automatically calculate still can't working)

How to calculate A vertically and B vertically from dropdown combo box and appear on result..
but still can't working well :(

code :

HTML

<select id="k1" class="tes" name="kelayakan1" size="1">
  <option value="">-- Pilih Salah Satu --</option>
  <option value="1">Layak</option>
  <option value="0">Tidak Layak</option>
</select>
<br>
<select id="k2" class="tesy" name="kelayakan2" size="1">
  <option value="">-- Pilih Salah Satu --</option>
  <option value="1">Layak</option>
  <option value="0">Tidak Layak</option>
</select>
<br>
<select id="k3" class="tesl" name="kelayakan2" size="1">
  <option value="">-- Pilih Salah Satu --</option>
  <option value="1">Layak</option>
  <option value="0">Tidak Layak</option>
</select>
<br>
<br>
<table style="width:30%;" border="1">
  <thead>
    <tr>
      <th colspan="5">TES</th>
    </tr>
    <tr>
      <th></th>
      <th>A</th>
      <th>B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>
        <div id="aa1" class="layak" style="text-align:center;"></div>
      </td>
      <td>
        <div id="aa2" style="text-align:center;"></div>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>
        <div id="bb1" class="layak" style="text-align:center;"></div>
      </td>
      <td>
        <div id="bb2" style="text-align:center;"></div>
      </td>
    </tr>
    <tr>
      <td>3</td>
      <td>
        <div id="cc1" class="layak" style="text-align:center;"></div>
      </td>
      <td>
        <div id="cc2" style="text-align:center;"></div>
      </td>
    </tr>
    <tr>
      <td>Result</td>
      <td>
        <div id="hasil1" style="text-align:center;"></div>
      </td>
      <td>
        <div id="hasil2" style="text-align:center;"></div>
      </td>
    </tr>
  </tbody>
</table>
<br>
<br> I want to calculate A and B vertically ..

Javascript

   $(document).ready(function() {
     //Iterate through each Textbox and add keyup event handler
     $(".tes").each(function() {
       $(this).change(function() {
         //Initialize total to 0
         var ap = document.getElementById('k1').value;
         var satu = 1;
         var nol = 0;
         var aa1 = document.getElementById('aa1');
         var aa2 = document.getElementById('aa2');
         if (ap == "1") {
           aa1.innerHTML = satu;
           aa2.innerHTML = nol;
         } else {
           aa1.innerHTML = nol;
           aa2.innerHTML = satu;
         }

       });
     });

     $(".tesy").each(function() {
       $(this).change(function() {
         //Initialize total to 0
         var bp = document.getElementById('k2').value;
         var satu = 1;
         var nol = 0;

         var bb1 = document.getElementById('bb1');
         var bb2 = document.getElementById('bb2');
         if (bp == "1") {
           bb1.innerHTML = satu;
           bb2.innerHTML = nol;

     } else {
       bb1.innerHTML = nol;
       bb2.innerHTML = satu;
     }
   });
 });

 $(".tesl").each(function() {
   $(this).change(function() {
     //Initialize total to 0
     var cp = document.getElementById('k3').value;
     var satu = 1;
     var nol = 0;

     var cc1 = document.getElementById('cc1');
     var cc2 = document.getElementById('cc2');
     if (cp == "1") {
       cc1.innerHTML = satu;
       cc2.innerHTML = nol;
     } else {
       cc1.innerHTML = nol;
       cc2.innerHTML = satu;
     }
   });
 });

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

   if (!isNaN(this.value) && this.value.length != 0) {
     total += parseFloat(this.value);
   }
 });

 jml = total;
 $("#hasil1").val(jml);


   });

in JSFIDDLE : https://jsfiddle.net/taraym/zo5j7wn9/1/

Sami · Accepted Answer · 2016-07-11 01:53:29Z

1

Working and tested code:

function calculateSum(){

//Calculate Sum Of A
var A = [];  var sumOfA = 0;
$('#tbl_data tr:not(:has(th))').not(':last').each(function(){   
   A.push($(this).find("td:eq(1)").text().trim());
})

for (i = 0; i < A.length; ++i) {      
         if (A[i]!='') {sumOfA += parseInt(A[i]);}
}
$('#tbl_data tr:last').find('td:eq(1)').text(sumOfA);

//Calculate Sum Of B
var B = []; var sumOfB = 0;
$('#tbl_data tr:not(:has(th))').not(':last').each(function(){   
   B.push($(this).find("td:eq(2)").text().trim());
})

for (i = 0; i < B.length; ++i) {      
         if (B[i]!='') {sumOfB += parseInt(B[i]);}
}
$('#tbl_data tr:last').find('td:eq(2)').text(sumOfB);

}

Add calculateSum(); at the end of every dropdown change event.

Working Fiddle

Hope this helps!

answered Jul 11, 2016 at 1:53

Sami

3,8204 gold badges19 silver badges30 bronze badges

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

1 Comment

TARA Over a year ago

THANK YOUUU .. Help a lot.. @sami

Collectives™ on Stack Overflow

Can't Calculate Automatically Javascript with Dropdown not Typing the number

HTML

Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML

Javascript

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related