Clever Geek Handbook

Sum and multiply input values ​​in one form

I want to build a live javascript form for calculating prices. There are 4 windows:

<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()">

The values ​​of the fields "1" and "2" are summation and multiplication by "cars" and "hours".

For example: 20 + 30 * 2 * 2

I tried it with this, but it doesn't work:

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


source to share


2 answers


Your problem is that the property is value

returning DOMString , in which case the sign is +

concatenating them. You need to convert your values ​​to Integer, for example using parseInt

:

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

It also seems like your attributes are id

not equal to what you get in JS. Should be:

<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()">


Working example:

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">
Run codeHide result


+1


source


Just like Antyrat said, you are not parsing the input, which will be one of the reasons, and secondly, you can get null if there is no other input. so



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


source






More articles:


All Articles