Solved

Javascript Multiplication and IF / Else

Posted on 2014-07-26
11
239 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
  • 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
 
LVL 108

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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
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 108

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 500 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 108

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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

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.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

744 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now