Click here to Skip to main content
14,973,117 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
It is a calculator operator using a closure function.

It is not showing result by user selection please give me help

in the result block it is showing as a NaN after converting it to an Integer also.

What I have tried:

//HTML code
HTML
<pre><html>
	<head>
		<title> Closures on Arithmatic Operations</title>
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="ClosuresArithmatic.js"></script>
		<script type="text/javascript" src="mathematicalOperatons.js"></script>
				<style type="text/css">
			.block{
				width: 500px;
				height: 500px;
				border: 1px solid black;
				background-color: #ccc;
			}
			li{
				list-style: none;
				padding: 5px;
			}
			#showvalues{
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="block">
			<ul>
				<li>
					Enter the First Number : <input type="text" name="fnumber" id="fnumber">
				</li>
				<li>
					Enter the second Number : <input type="text" name="fnumber" id="snumber">
				</li>
				<li> Type of Arithmatic Operations
					<select id="operation">
						<option value="">Arithatic Operations</option>
						<option value="add">Addition</option>
						<option value="sub">Subtraction</option>
						<option value="mul">Multiplication</option>
						<option value="divn">Division</option>
					</select>
				</li>
			</ul>
			<input type="button" value="Submit Values"  onclick="return calculate_operations()">
		<div id="showvalues">
			<ul>
				<li>
					Entered first Number is : <span id="numberF" />
				</li>

				<li>
					Entered second Number is : <span id="numberS" />
				</li>
				<li>
					Type of Operation Selected : <span id="sel_operation"></span>
				</li>
				<li>
					Result is : <span id="result_block" /> 
				</li>
			</ul>
			</div>
		</div>
	</body>
</html>



// Java Script Code
JavaScript
function calculate_operations(){
	var details = {}
		details.Firstvalue = document.querySelector("#fnumber").value;
		details.SecondValue = document.querySelector("#snumber").value;
		details.Firstvalue = parseInt(details.Firstvalue);
		details.SecondValue = parseInt(details.SecondValue);
		details.result = 0;
		//details.selectedOperation = document.querySelector("operation")
		details.showdetails = function(){
			//console.log(pradeep);
			document.querySelector("#numberF").innerText = details.Firstvalue;
			document.querySelector("#numberS").innerText = details.SecondValue;
			function operationsMathematical(){
				if (document.querySelector("#operation".value == "")) {
				document.querySelector("#sel_operation").innerText = +"No operation selected";
				}
				if (document.querySelector("#operation").value== "add") {
					document.querySelector("#sel_operation").innerHTML =+details.Firstvalue +"+" +details.SecondValue ;
					details.result= pradeep.manupulation_value(details.Firstvalue,details.SecondValue);
					details.result=parseInt(pradeep.manupulation_value(sum_is));
					document.querySelector("#result_block").innerHTML = +details.result;

				}
				if (document.querySelector("#operation").value== "sub") {
					document.querySelector("#sel_operation").innerText =+details.Firstvalue  +"-" +details.SecondValue;
					details.result= pradeep.manupulation_value(details.Firstvalue,details.SecondValue);
					details.result=parseInt(pradeep.manupulation_value(sub_is));
					document.querySelector("#result_block").innerHTML = +details.result;
				}
				if (document.querySelector("#operation").value== "mul") {
					document.querySelector("#sel_operation").innerText =+details.Firstvalue +"*" +details.SecondValue;
					details.result= pradeep.manupulation_value(details.Firstvalue,details.SecondValue);
					details.result=parseInt(pradeep.manupulation_value(mul_is));
					document.querySelector("#result_block").innerHTML = +details.result;
				}
				if (document.querySelector("#operation").value== "divn") {
					document.querySelector("#sel_operation").innerText =+details.Firstvalue +"/" +details.SecondValue;
					details.result= pradeep.manupulation_value(details.Firstvalue,details.SecondValue);
					details.result=parseInt(pradeep.manupulation_value(divn_is));
					document.querySelector("#result_block").innerHTML = +details.result;
				}
			}
			operationsMathematical();
		}
	//details.result= pradeep.manupulation_value(details.Firstvalue,details.SecondValue);
	document.querySelector("#showvalues").style.display="block";
	details.showdetails();
}

//Closure Code
JavaScript
var pradeep=(function(){
	//result = 0; sum_is=sub_is=mul_is=divn_is=0; 
	function manupulation(x,y){
		var sum_is = getsumValues(x,y);
		var sub_is = getsubValues(x,y);
		var mul_is = getmulValues(x,y);
		var divn_is = getdivnValues(x,y);
		return [sum_is,sub_is,mul_is,divn_is];
	}
	function getsumValues(x,y){
		var sum_is = x+y;
		return sum_is; 
	}
	function getsubValues(x,y){
		var sub_is = x-y;
		return sub_is;
	}
	function getmulValues(x,y){
		var mul_is = x*y;
		return mul_is;
	}
	function getdivnValues(x,y){
		var divn_is = x/y;
		return divn_is;
	}return{
		manupulation_value : function(x,y){
			return manupulation(x,y);
		}
	}
})();
Posted
Updated 26-Feb-17 7:10am
v2
Comments
Graeme_Grant 25-Feb-17 2:32am
   
Are you using a debugger?
Pradeep Reddy 25-Feb-17 2:49am
   
No....!
Graeme_Grant 25-Feb-17 3:47am
   
It will save you heaps of time. Google[^]

Quote:
JavaScript
details.result = pradeep.manupulation_value(details.Firstvalue, details.SecondValue);
details.result = parseInt(pradeep.manupulation_value(sum_is));

Debug your code and step through these lines:
  1. pradeep.manupulation_value returns an array of four values representing the results of all four operations;
  2. Within the operationsMathematical function, sum_is is not a defined variable;
  3. You then try to call pradeep.manupulation_value again, passing one undefined variable, and skipping the second argument;
  4. Depending on the browser, the result of this second call will either be an array of four NaN values, or a run-time error teliing you that sum_is is not defined;
  5. Assuming the call succeeds and returns an array, parseInt will convert the array to a string ("NaN,NaN,NaN,NaN"), and then try to parse that string as an integer;
  6. Unsurprisingly, the result will be NaN.

Replace those lines in each of your if blocks with:
JavaScript
var result = pradeep.manipulation_value(details.Firstvalue, details.SecondValue);
details.result = result[0];
replacing 0 with the appropriate index within the returned array.
   
Your code have bugs, the tool is the debugger.

When you don't understand what your code is doing or why it does what it does, the answer is debugger.
Use the debugger to see what your code is doing. Just set a breakpoint and see your code performing, the debugger allow you to execute lines 1 by 1 and to inspect variables as it execute, it is an incredible learning tool.

Debugger - Wikipedia, the free encyclopedia[^]

The debugger is here to show you what your code is doing and your task is to compare with what it should do.
There is no magic in the debugger, it don't find bugs, it just help you to. When the code don't do what is expected, you are close to a bug.
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900