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