JSFiddle - React, Tailwind, and code Playground

by taraym

HTML

<select id="k1" onchange="kes1();" 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" onchange="kes2();" 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>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 A1 and A2, B1 and B2 and appear on result.. 
<br>
if 1+0=1, if 1+1=2, if 0+0=0
<br>
but still can't working well :(

JavaScript

function kes1() {
        var ap = document.getElementById('k1').value;
        var satu = 1;
        var nol = 0;

        if (ap == "1") {
          document.getElementById('aa1').innerHTML = satu;
          document.getElementById('aa2').innerHTML = nol;
        } else {
          document.getElementById('aa1').innerHTML = nol;
          document.getElementById('aa2').innerHTML = satu;
        }
      }

      function kes2() {
        var bp = document.getElementById('k2').value;
        var satu = 1;
        var nol = 0;

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


      $(document).ready(function() {
        //Iterate through each Textbox and add keyup event handler
        $(".layak").each(function() {
          $(this).innerHTML(function() {
            //Initialize total to 0
            var total = 0;
            $(".layak").each(function() {
              // Sum only if the text entered is number and greater than 0
              if (!isNaN(this.value) && this.value.length != 0) {
                total += parseFloat(this.value);
              }
            });
            //Assign the total to label
            //.toFixed() method will roundoff the final sum to 2 decimal places
            $("#hasil1").val(total);
          });
        });
      });


      /*
            function hitung5() {
        var ap=document.getElementById('aa1').value;
        var bp=document.getElementById('bb1').value;
        var cp=document.getElementById('cc1').value;
        var dp=document.getElementById('dd1').value;
        var ep=document.getElementById('aa2').value;
        var fp=document.getElementById('bb2').value;
        var gp=document.getElementById('cc2').value;
        var...