Solved

Javascript Multiplication and IF / Else

Posted on 2014-07-26
239 Views
I want to do multiplication in Javascript but I'm not sure how to write the If Else part:
``````<script>

function findSum(){
var myBox1 = document.getElementById('qty1').value;
var myBox2 = document.getElementById('qty2').value;
var myBox2a = if(myBox2 != '') { myBox2 } else { 1 };
var myBox3 = document.getElementById('qty3').value;
var myBox3a = if(myBox3 != '') { myBox3 } else { 1 };
var result = document.getElementById('result');
var myResult = myBox1 * myBox2a * myBox3a;
result.value = myResult;
}
</script>
``````
0
Question by:rgranlund
• 4
• 4
• 3

LVL 58

Expert Comment

ID: 40221700
Whats the problem you are having, code looks OK
0

LVL 7

Author Comment

ID: 40221710
Is there a way to tighten it up?  When I run it, it does not do anything . It adds up nothing.
0

LVL 7

Author Comment

ID: 40221713
The whole thing:
``````<script>

function findSum(){
var myBox1 = document.getElementById('qty1').value;
var myBox2 = <?php echo \$a; ?>;
var myBox3 = <?php echo \$b; ?>;
var result = document.getElementById('result');
var myResult = myBox1 * myBox2 * myBox3;
result.value = myResult;
}
</script>
?>
<script>

function findSum(){
var myBox1 = document.getElementById('qty1').value;
var myBox2 = document.getElementById('qty2').value;
var myBox2a = if(myBox2 != '') { myBox2 } else { 1 };
var myBox3 = document.getElementById('qty3').value;
var myBox3a = if(myBox3 != '') { myBox3 } else { 1 };
var result = document.getElementById('result');
var myResult = myBox1 * myBox2a * myBox3a;
result.value = myResult;
}
</script>

<title>HTML5 Page With JavaScript Form Input Control Summation</title>
<body>

<form>
Qty1 : 	<input name="qty1" id="qty1" class="qty" value="183.60" autocomplete="off" /><br>
Qty2 : 	<select name="qty2" id="qty2" class="qty" autocomplete="off" >
<option value="">Select an option...</option>
<option value="1">1</option>
<option value=".925">.925</option>
<option value=".85">.85</option>
<option value=".80">.80</option>
</select>

<br>
Qty3 : <select name="qty3" id="qty3" class="qty" autocomplete="off" >
<option value="">Select an option...</option>
<option value="1.00">1.00</option>
<option value="1.00">1.00</option>
<option value=".85">.85</option>
<option value=".80">.80</option>
</select>
<br>
Total : <input readonly type="text" name="total" id="result"/>
<input type="button" value="Preview" onclick="findSum()" />
</form>
``````
0

LVL 108

Expert Comment

ID: 40221743
See if this makes sense.  It sets a default value for the select controls.

``````<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />

<script>

function findSum(){
var myBox1 = document.getElementById('qty1').value;
var myBox2 = document.getElementById('qty2').value;
var myBox3 = document.getElementById('qty3').value;
var result = document.getElementById('result');
var myResult = myBox1 * myBox2 * myBox3;
result.value = myResult;
}
</script>

<title>HTML5 Page With JavaScript Form Input Control Summation</title>
<body>

<form>
Qty1 : <input name="qty1" id="qty1" class="qty" value="183.60" autocomplete="off" /><br>
Qty2 : <select name="qty2" id="qty2" class="qty" autocomplete="off" >
<option value="1">Select an option...</option>
<option value="1">1</option>
<option value=".925">.925</option>
<option value=".85">.85</option>
<option value=".80">.80</option>
</select>
<br>
Qty3 : <select name="qty3" id="qty3" class="qty" autocomplete="off" >
<option value="1">Select an option...</option>
<option value="1.00">1.00</option>
<option value="1.00">1.00</option>
<option value=".85">.85</option>
<option value=".80">.80</option>
</select>
<br>
Total : <input readonly type="text" name="total" id="result"/>
<input type="button" value="Preview" onclick="findSum()" />
</form>

</body>
</html>
``````
0

LVL 58

Expert Comment

ID: 40221746
Change your script to the following, I assume the double script was just a pasting error

``````<script>
function findSum(){
var myBox1 = document.getElementById('qty1').value;
var myBox2 = document.getElementById('qty2').value;

var myBox2a = myBox2 != '' ? myBox2 : 1;

var myBox3 = document.getElementById('qty3').value;

var myBox3a = myBox3 != '' ? myBox3 : 1;

var result = document.getElementById('result');
var myResult = myBox1 * myBox2a * myBox3a;
result.value = myResult;
}
</script>
``````
Edit
Rays makes more sense if you are just defaulting to 1
0

LVL 7

Author Comment

ID: 40221761
This is all making great sense to me now.  Both answers are perfect for what I am trying to do. However, I have one last piece that I am trying to understand and the script follows.  The second script findSum() works perfect.  However, I'm hug up on the first function findSubSum().

What I want it to do is to follow the class sum and multiply as it goes.  As it stands right now, it adds everything up as it goes.  What I want it to do is multiple by the values, (qty) not add.
``````<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />

<script>
function findSubSum(){
var arr = document.getElementsByClassName('qty');
var tot = 0;
for(var i=0;i<arr.length;i++){
if(parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
document.getElementById('sum').value = tot;
}

function findSum(){
var myBox1 = document.getElementById('qty1').value;
var myBox2 = document.getElementById('qty2').value;

var myBox2a = myBox2 != '' ? myBox2 : 1;

var myBox3 = document.getElementById('qty3').value;

var myBox3a = myBox3 != '' ? myBox3 : 1;

var result = document.getElementById('result');
var myResult = myBox1 * myBox2a * myBox3a;
result.value = myResult;
}
</script>

<title>HTML5 Page With JavaScript Form Input Control Summation</title>
<body>

<form method="POST" action="">
Qty1 : 	<input name="qty1" id="qty1" class="qty" onblur="findSubSum()" autocomplete="off" /><br>
Qty2 : 	<select name="qty2" id="qty2" class="qty" onblur="findSubSum()" autocomplete="off" >
<option value="">Select an option...</option>
<option value="1">1</option>
<option value=".925">.925</option>
<option value=".85">.85</option>
<option value=".80">.80</option>
</select>

<br>
Qty3 : <select name="qty3" id="qty3" class="qty" onblur="findSubSum()" autocomplete="off" >
<option value="">Select an option...</option>
<option value="1.00">1.00</option>
<option value="1.00">1.00</option>
<option value=".85">.85</option>
<option value=".80">.80</option>
</select>
<br>
SUM So Far: <input readonly type="text" name="sum" id="sum"/><br /><br />
<input type="button" value="Preview" onclick="findSubSum()" /><br /><br /><br />
Total : <input readonly type="text" name="total" id="result"/>
<input type="button" value="Preview" onclick="findSum()" />

</form>

</body>
</html>
``````
I'm going to get this!
0

LVL 58

Expert Comment

ID: 40221786
``````function findSubSum(){
arr = document.getElementsByClassName('qty');
tot = 1;
for(var i=0;i<arr.length;i++){
tot *= arr[i].tagName === 'SELECT' ? parseFloat(arr[i].options[arr[i].selectedIndex].value) || 1 :parseFloat(arr[i].value)||1
}
document.getElementById('sum').value = tot;
}
``````
0

LVL 7

Author Comment

ID: 40221834
@Gary but what if they are not just select , maybe there is a combination of Select, radio buttons, input boxes, that all have a value.
0

LVL 108

Expert Comment

ID: 40221849
CodeAvengers JavaScript Class. Be sure you're up to speed on HTML first.  Just sayin'
0

LVL 58

Accepted Solution

Gary earned 500 total points
ID: 40221850
The code is for dropdowns or inputs - doesn't matter

``````function findSubSum(){
arr = document.getElementsByClassName('qty');
tot = 1;
for(var i=0;i<arr.length;i++){
if(arr[i].type=="text"){
v=parseFloat(arr[i].value)||1
}
else if(arr[i].tagName === 'SELECT'){
v=parseFloat(arr[i].options[arr[i].selectedIndex].value) || 1
}
else if(arr[i].checked){
v=arr[i].value||1
}
tot *= v
}
document.getElementById('sum').value = tot;
}
``````
0

LVL 108

Expert Comment

ID: 40227608
It's traditional to award at least some of the points to the first correct answer, so I have to assume that you accidentally overlooked the code snippet here, which was a tested and working example showing exactly how to solve the problem.  In particular, line 14 of the snippet shows how to do multiplication in JavaScript.
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28484523.html#a40221743
0

Featured Post

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be \$37.1B.