以一种形式输入值求和和乘法答案

【问题标题】：Input values summation and multiplication in one form以一种形式输入值求和和乘法
【发布时间】：2015-05-22 12:53:08
【问题描述】：

我想构建一个实时 JavaScript 表单来计算价格。有4个盒子：

<input type="text" id="hours" oninput="calculate()">
<input type="text" id="cars" oninput="calculate()">
<input type="text" id="1" oninput="calculate()">
<input type="text" id="2" oninput="calculate()">

“1”和“2”框值是与“汽车”和“小时”相加和相乘。

例如：20 + 30 * 2 * 2

我用这个试过了，但它不起作用：

<script type="text/javascript">
    function calculate() {
        var myBox1 = document.getElementById('box1').value; 
        var myBox2 = document.getElementById('box2').value;
        var myBox3 = document.getElementById('box3').value;
            var myBox4 = document.getElementById('box4').value;
        var result = document.getElementById('result'); 
        var myResult = (myBox1+myBox2)*myBox3*myBox4;
        result.value = myResult;

    }


</script>

【问题讨论】：

我可以在元素选择器中看到错误
嗯，只要你只有这些输入，你也可以做一些简单和可维护的事情：jsfiddle.net/ezpjkexv/1

标签： javascript forms input

【解决方案1】：

您的问题是value 属性返回DOMString，在这种情况下+ 符号将它们连接起来。您需要将值转换为整数，例如使用parseInt 函数：

var myResult = (parseInt( myBox2, 10 )+parseInt( myBox2, 10 ))*parseInt( myBox3, 10 )*parseInt( myBox4, 10 );

您的 id 属性似乎也不等于您在 JS 中获得的属性。应该是：

<input type="text" id="box1" oninput="calculate()">
<input type="text" id="box2" oninput="calculate()">
<input type="text" id="box3" oninput="calculate()">
<input type="text" id="box4" oninput="calculate()">

工作示例：

function calculate() {
  var myBox1 = document.getElementById('box1').value; 
  var myBox2 = document.getElementById('box2').value;
  var myBox3 = document.getElementById('box3').value;
  var myBox4 = document.getElementById('box4').value;
  var result = document.getElementById('result'); 
  var myResult = (parseInt( myBox2, 10 )+parseInt( myBox2, 10 ))*parseInt( myBox3, 10 )*parseInt( myBox4, 10 );
  result.value = myResult;
}

<input type="text" id="box1" oninput="calculate()">
<input type="text" id="box2" oninput="calculate()">
<input type="text" id="box3" oninput="calculate()">
<input type="text" id="box4" oninput="calculate()">
<input type="text" id="result">

【讨论】：

【解决方案2】：

就像 Antyrat 提到的那样，您没有解析输入，这是一个原因，第二个原因是如果没有其他输入，您可能会得到 null。所以

<script type="text/javascript">
    function calculate() {
        var myBox1 = document.getElementById('box1').value; 
        var myBox2 = document.getElementById('box2').value;
        var myBox3 = document.getElementById('box3').value;
        var myBox4 = document.getElementById('box4').value;
        var result = document.getElementById('result'); 
        var myResult;
        if(myBox1.length != 0 && myBox2.length != 0 && myBox3.length != 0 && myBox4.length != 0){
           myResult = (parseInt( myBox2, 10 )+parseInt( myBox2, 10 ))*parseInt( myBox3, 10 )*parseInt( myBox4, 10 );
       }else{
           myResult = 0;
        }

        result.value = myResult;

    }


</script>

【讨论】：