使用javascript使用只读输入自动计算数字

时间：2020-08-12 06:51:40

标签： javascript html

我尝试使用javascript自动添加3个类型为readonly的输入文本，每个文本输入的每个值都会根据相关输入的输入自动更改。但是，当所有输入都填充有值时，即使我尝试放置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文本输入自动更改，该如何解决？

3 个答案:

答案 0 :(得分：3)

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

答案 1 :(得分：3)

尝试在TextBox5和TextBox6上的 onblur事件上调用函数：

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);

  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 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 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 onblur="total()" onkeyup="subtraction()" type="number" onblur="total()" id="number6" placeholder="number6"></td>
    <td>=</td>
    <td><input onblur="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>

答案 2 :(得分：2)

在每个操作的结果中放入total（）方法。例如-

multiplication(){
 if (!isNaN(result)) {
      // your code
      total()
  }
}
addition(){
 if (!isNaN(result)) {
      // your code
      total()
  }
}

subtraction(){
 if (!isNaN(result)) {
      // your code
      total()
  }
}


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;
      total()
  }
  
}

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;
      total()
  }
}

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;
      total()
  }
  
}

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 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 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 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>

相关问题
最新问题