Javascript自动计算

Question

我尝试使用 javascript 自动添加 3 个只读类型的输入文本，每个文本输入的每个值都会根据相关输入的输入自动更改。但是当所有输入都填充了值时，total 输入文本根本没有改变，即使我尝试放置 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;
  }
}

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>

这样total文本输入自动变化，如何解决？

Answer 1

您可以使用 .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>