?
Solved

Javascript Multiplication and IF / Else

Posted on 2014-07-26
11
Medium Priority
?
261 Views
Last Modified: 2014-07-29
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>

Open in new window

0
Comment
Question by:rgranlund
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
  • 3
11 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40221700
Whats the problem you are having, code looks OK
0
 
LVL 7

Author Comment

by:rgranlund
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

by:rgranlund
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>
</head>
<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>

Open in new window

0
Stack Overflow Podcast - Developer Story

Welcome to the Stack Overflow podcast recorded Thursday July 20 at Stack Overflow Headquearters in NYC. Your hosts today are podcast regulars Jay Hanlon, David Fullerton, and Ilana Yitzhaki, plus the quite irregular Matt Sherman (Stack Overflow Engineering Manager extraordinaire)

 
LVL 111

Expert Comment

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

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<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>
</head>
<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>

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
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>

Open in new window

Edit
Rays makes more sense if you are just defaulting to 1
0
 
LVL 7

Author Comment

by:rgranlund
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">
<head>
<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>
</head>
<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>                                      

Open in new window

I'm going to get this!
0
 
LVL 58

Expert Comment

by:Gary
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;
}

Open in new window

0
 
LVL 7

Author Comment

by:rgranlund
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 111

Expert Comment

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

Accepted Solution

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

But for radios and to make it a bit more readable

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;
}

Open in new window

0
 
LVL 111

Expert Comment

by:Ray Paseur
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question