Javascript automatically calculating

I try to add 3 input text of type readonly automatically using javascript, each value of each text input changes automatically based on the input from the related one. But when all of the inputs are filled with values, the total input text has not changed at all, even though I’ve tried to put the onchange attribute.

This is the code so far:

function multiplication() {
  var number1 = document.getElementById('number1').value;
  var number2 = document.getElementById('number2').value;

  if (number1 == "")
    number1 = 0;
  if (number2 == "")
    number2 = 0;

  var result = parseInt(number1) * parseInt(number2);
  if (!isNaN(result)) {
    document.getElementById('total1').value = result;
  }
}

function addition() {
  var number3 = document.getElementById('number3').value;
  var number4 = document.getElementById('number4').value;

  if (number3 == "")
    number3 = 0;
  if (number4 == "")
    number4 = 0;

  var result = parseInt(number3) + parseInt(number4);
  if (!isNaN(result)) {
    document.getElementById('total2').value = result;
  }
}

function subtraction() {
  var number5 = document.getElementById('number5').value;
  var number6 = document.getElementById('number6').value;

  if (number5 == "")
    number5 = 0;
  if (number6 == "")
    number6 = 0;

  var result = parseInt(number5) - parseInt(number6);
  if (!isNaN(result)) {
    document.getElementById('total3').value = result;
  }
}

function total() {
  var total1 = document.getElementById('total1').value;
  var total2 = document.getElementById('total2').value;
  var total3 = document.getElementById('total3').value;

  if (total1 == "")
    total1 = 0;
  if (total2 == "")
    total2 = 0;
  if (total3 == "")
    total3 = 0;

  var result = parseInt(total1) + parseInt(total2) + parseInt(total3);
  if (!isNaN(result)) {
    document.getElementById('total').value = result;
  }
}

<table>
  <tr>
    <td><input onkeyup="multiplication()" type="number" id="number1" placeholder="number1"></td>
    <td>x</td>
    <td><input onkeyup="multiplication()" type="number" id="number2" placeholder="number2"></td>
    <td>=</td>
    <td><input onchange="total()" type="number" id="total1" placeholder="total1" readonly="readonly"></td>
  </tr>
  <tr>
    <td><input onkeyup="addition()" type="number" id="number3" placeholder="number3"></td>
    <td>+</td>
    <td><input onkeyup="addition()" type="number" id="number4" placeholder="number4"></td>
    <td>=</td>
    <td><input onchange="total()" type="number" id="total2" placeholder="total2" readonly="readonly"></td>
  </tr>
  <tr>
    <td><input onkeyup="subtraction()" type="number" id="number5" placeholder="number5"></td>
    <td>-</td>
    <td><input onkeyup="subtraction()" type="number" id="number6" placeholder="number6"></td>
    <td>=</td>
    <td><input onchange="total()" type="number" id="total3" placeholder="total3" readonly="readonly"></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td><input type="number" id="total" placeholder="total1 + total2 + total3" readonly="readonly"></td>
  </tr>
</table>

So that the total text input changes automatically, how to solve this?

Answer

You can trigger change manually using .onchange():

function multiplication() {
  var number1 = document.getElementById('number1').value;
  var number2 = document.getElementById('number2').value;

  if (number1 == "")
    number1 = 0;
  if (number2 == "")
    number2 = 0;

  var result = parseInt(number1) * parseInt(number2);
  if (!isNaN(result)) {
    document.getElementById('total1').value = result;
  }
  
  document.getElementById('total1').onchange();
}

function addition() {
  var number3 = document.getElementById('number3').value;
  var number4 = document.getElementById('number4').value;

  if (number3 == "")
    number3 = 0;
  if (number4 == "")
    number4 = 0;

  var result = parseInt(number3) + parseInt(number4);
  if (!isNaN(result)) {
    document.getElementById('total2').value = result;
  }
  document.getElementById('total2').onchange();
}

function subtraction() {
  var number5 = document.getElementById('number5').value;
  var number6 = document.getElementById('number6').value;

  if (number5 == "")
    number5 = 0;
  if (number6 == "")
    number6 = 0;

  var result = parseInt(number5) - parseInt(number6);
  if (!isNaN(result)) {
    document.getElementById('total3').value = result;
  }
  document.getElementById('total3').onchange();
}

function total() {

  var total1 = document.getElementById('total1').value;
  var total2 = document.getElementById('total2').value;
  var total3 = document.getElementById('total3').value;

  if (total1 == "")
    total1 = 0;
  if (total2 == "")
    total2 = 0;
  if (total3 == "")
    total3 = 0;

  var result = parseInt(total1) + parseInt(total2) + parseInt(total3);
  if (!isNaN(result)) {
    document.getElementById('total').value = result;
  }
}

<table>
  <tr>
    <td><input onkeyup="multiplication()" type="number" id="number1" placeholder="number1"></td>
    <td>x</td>
    <td><input onkeyup="multiplication()" type="number" id="number2" placeholder="number2"></td>
    <td>=</td>
    <td><input onchange="total()" type="number" id="total1" placeholder="total1" readonly="readonly"></td>
  </tr>

  <tr>
    <td><input onkeyup="addition()" type="number" id="number3" placeholder="number3"></td>
    <td>+</td>
    <td><input onkeyup="addition()" type="number" id="number4" placeholder="number4"></td>
    <td>=</td>
    <td><input onchange="total()" type="number" id="total2" placeholder="total2" readonly="readonly"></td>
  </tr>

  <tr>
    <td><input onkeyup="subtraction()" type="number" id="number5" placeholder="number5"></td>
    <td>-</td>
    <td><input onkeyup="subtraction()" type="number" id="number6" placeholder="number6"></td>
    <td>=</td>
    <td><input onchange="total()" type="number" id="total3" placeholder="total3" readonly="readonly"></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td><input type="number" id="total" placeholder="total1 + total2 + total3" readonly="readonly"></td>
  </tr>
</table>