JSFiddle - React, Tailwind, and code Playground

by Joe

HTML

<table id="pr">
  <tbody>
    <tr class="thd">
      <th>Score A</th>
      <th>Score B</th>
      <th>Total</th>
    </tr>
    <tr>
      <td>
        <input type="text" class="fin" onkeyup="update(this);" />
      </td>
      <td>
        <input type="text" class="fin" id="joe" onkeyup="update(this);" />
      </td>
      <td>
        <input type="text" class="fin" name="totdeduction" />
      </td>
    </tr>
  </tbody>
</table>

<input type="button" id="totalTwo" value="Clear A" onclick="document.getElementById('joe').value = ''"/>

JavaScript

function isNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

function update(element) {
  rob = element;
  var j = element.parentElement.parentElement.children[0].children[0].value;
  var l = element.parentElement.parentElement.children[1].children[0].value;
  console.log(j, l);

  if (j === "" || !isNumber(j)) {
    j = 0;
  }
  if (l === "" || !isNumber(l)) {
    l = 0;
  }

  var k = parseInt(j, 10);
  var m = parseInt(l, 10);
  var n = (k + m);

  element.parentElement.parentElement.children[2].children[0].value = n;
}

/* $("#totalTwo").click(function() {
  $("#joe").val('');
  $("#joe").hide();
}); */

function claculate() {
$("#joe").val('');
}