Question

我想构建一个实时的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()">

＆＃34; 1＆＃34;和＆＃34; 2＆＃34; box值是＆＃34; cars＆＃34;的总和和乘法。和＆＃34;小时＆＃34;。

例如：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>

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

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

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

2 个答案: