Jump to content

calculator

niclas.jonsson1992

By niclas.jonsson1992
in Javascript Help

Recommended Posts

niclas.jonsson1992 Newbie

niclas.jonsson1992

Posted
Posted

Hi all! :)

 

I am trying to make an calculator in JS and i am almost done. I am almost done, but i have some errors.  :shrug:

 

The error is:

I can´t press "Result"

The sign of the counting method is writen in the box(+,  -,  *,  /).

 

JS

var c_arrNumber;
var c_bSattKomma = false;
var c_dResultat= "";
var c_iRaknesatt = 4;
var c_iResultatVisas = 0;


// ................................................................................
function AddNumber(sChosenNumber) { // write a number
   var objDiv = document.getElementById("Result");
   if(c_iResultatVisas == 1) {
         objDiv.innerHTML = "";
        c_iResultatVisas = 0;
   }

   if (sChosenNumber == 10) {
      if (c_bSattKomma == false) {
         objDiv.innerHTML = objDiv.innerHTML + ".";
         c_bSattKomma = true;
      }
   } else {
      if (objDiv.innerHTML == "0" && sChosenNumber != 0)
      objDiv.innerHTML = sChosenNumber;
      else if (objDiv.innerHTML == "0") {
      } else
         objDiv.innerHTML = objDiv.innerHTML + sChosenNumber; // result of 2 numbers
   }

}
// ................................................................................
function ChooseCalc(iMethod) { // cnange color on the buttons.
   var objDivResult = document.getElementById("Result");
   for(var i=0;i<5;i++) {	
      var sDivId = "divCalc" + i;	  
      var objDiv = document.getElementById(sDivId);
      objDiv.style.backgroundColor="#CCC";	 // gray color
   }
   sDivId = "divCalc" + iMethod;
   objDiv = document.getElementById(sDivId);
   objDiv.style.backgroundColor="#00FF00"; // green colur

   if(c_dResultat=="") {
//  	 alert("förre" + c_dResultat); 	 
     c_dResultat =  objDiv.innerHTML// I THINK THE ERROR IS HERE!!!!!!!!!!!!!!!!!!!!!!!!!!!
//  	 alert("efter" + c_dResultat);   
     c_iResultatVisas = 1;
   }

   objDiv = document.getElementById("Result");
   if (c_iResultatVisas == 0) {
      c_dResultat = parseFloat(objDiv.innerHTML);
      c_iRaknesatt = iMethod;
      c_iResultatVisas = 1;
      SattResultat();
   } else {
//	 alert("a" + c_dResultat);
//	 alert("förre");
      RaknaUt(c_iRaknesatt);    // FELET ÄR I DENNA METOD
//	 alert("efter");
     c_iRaknesatt = iMethod;
   }
   c_iResultatVisas=1;
}
// ................................................................................
function Result() {  // resultatet
   if (c_iResultatVisas == 0) {
   } else {
   RaknaUt(c_iRaknesatt);
   c_iResultatVisas = 0;
   c_iRakneSatt = 4;
   }
}
// ................................................................................
function RaknaUt(iRaknesatt) { // What counting
   if (c_iResultatVisas == 0) {
//	 alert("a");
   } else {
      var objDiv = document.getElementById("Result");
      var dNummer = 0;
      if (objDiv.innerHTML != "") {
         dNummer = parseFloat(objDiv.innerHTML);
//	 alert("b" + c_dResultat);
      }
      if (iRaknesatt == 0) 
         c_dResultat = c_dResultat + dNummer;
      else if  (iRaknesatt == 1) {
         c_dResultat = c_dResultat - dNummer;
      } else if (iRaknesatt == 2) {
         c_dResultat = c_dResultat * dNummer;
//	 alert("c");
     } else if (iRaknesatt == 3) {
         if (dNummer == 0) {
//		    alert($dNummer);
            alert("Kan inte dividera med noll!"); // division by zero is not allowed
         } else
         c_dResultat = c_dResultat / dNummer;
      } else {
      }
      objDiv.innerHTML = "---" + c_dResultat + "---";   // The counting (+, -, /, *) is not suppost to be writen in the box.
//		    alert(dNummer);
   }
}
// ................................................................................
function ClearResultat() { // Clear
   SattResultat();
   c_iRakneSatt = 4;
   c_iResultatVisas = 0;
   c_dResultat = 0;
}
// ................................................................................

HTML

<!DOCTYPE html>
<html lang="sv">
   <head>
      <meta charset="UTF-8"/>
      <title>Counter</title>
      <link   rel ="stylesheet" href="css/main.css"/>
      <script src="js/counter.js"></script>
   </head>   
   <body onload="SattResultat()">
       <div id="calc-wrapper">
          <div id="Result">
          </div>
          <button id="divCalc0"    onclick="ChooseCalc(0)">   + </button>  
          <button id="divCalc1"    onclick="ChooseCalc(1)">   - </button>
          <button id="divCalc2"    onclick="ChooseCalc(2)">   * </button>
          <button id="divCalc3"    onclick="ChooseCalc(3)">   / </button>

          <button id="divCalc4"    onclick="Result()">        = </button>
          <button id="divCalc5"    onclick="ClearResultat()"> C </button>
  
          <button id="divNumber0"  onclick="AddNumber(0);">   0 </button>
          <button id="divNumber1"  onclick="AddNumber(1)">    1 </button>
          <button id="divNumber2"  onclick="AddNumber(2)">    2 </button>
          <button id="divNumber3"  onclick="AddNumber(3)">    3 </button>
          <button id="divNumber4"  onclick="AddNumber(4)">    4 </button>
          <button id="divNumber5"  onclick="AddNumber(5)">    5 </button>
          <button id="divNumber6"  onclick="AddNumber(6)">    6 </button>
          <button id="divNumber7"  onclick="AddNumber(7)">    7 </button>
          <button id="divNumber8"  onclick="AddNumber(">    8 </button>
          <button id="divNumber9"  onclick="AddNumber(9)">    9 </button>
          <button id="divNumber10" onclick="AddNumber(10)">   , </button>
      </div>
   </body>
</html>

 

CSS

html {
   background: rgb(10, 28, 30);
}
#calc-wrapper {
   margin: auto auto;
   margin-top: 200px;
   width: 380px;
   height: 250px;
   background: url('../image/background2.png') top right no-repeat;
   position: relative;
   border:solid 1px #fff;
   border-radius: 15px;
}
#Result {
   position: absolute;
   top: 40px;
   left: 10px;
   width: 165px;
   height: 34px;
   border: 1px solid #000000;
   background-color: #FFF;
   border-radius: 5px;
}
#Result p {
   margin: 3px;
   font: normal normal normal 8pt/10pt Courier;
}
#divCalc0 {
   position: absolute;
   top: 90px;
   left: 120px;
   width: 24px;
   height: 24px;
   border: 1px solid #000000;
   border-radius: 15px;
}
#divCalc1 {
   position: absolute;
   top: 90px;
   left: 150px;
   width: 24px;
   height: 24px;
   border: 1px solid #000000;
   background-color:#CCC;
   border-radius: 15px;
}

#divCalc2 {
   position: absolute;
   top: 120px;
   left: 120px;
   width: 24px;
   height: 24px;
   border: 1px solid #000000;
   background-color:#CCC;
   border-radius: 15px;
}

#divCalc3 {
   position: absolute;
   top: 120px;
   left: 150px;
   width: 24px;
   height: 24px;
   border: 1px solid #000000;
   background-color:#CCC;
   border-radius: 15px;
}

#divCalc4 {
   position: absolute;
   top: 150px;
   left: 120px;
   width: 54px;
   height: 24px;
   border: 1px solid #000000;
   background-color:#00FF00;
   border-radius: 5px;
}
#divCalc5 {
   position: absolute;
   top: 180px;
   left: 120px;
   width: 54px;
   height: 24px;
   border: 1px solid #000000;
   background-color:#CCC;
   border-radius: 5px;
}
#divCalc0 p,
#divCalc1 p,
#divCalc2 p,
#divCalc3 p,
#divCalc4 p,
#divCalc5 p,
#divNumber0 p,
#divNumber1 p,
#divNumber2 p,
#divNumber3 p,
#divNumber4 p,
#divNumber5 p,
#divNumber6 p,
#divNumber7 p,
#divNumber8 p,
#divNumber9 p,
#divNumber10 p {
   margin: 3px;
   text-align: center;
}
#divNumber0 {
   position: absolute;
   top: 180px;
   left: 10px;
   width: 24px;
   height: 24px;
   border: 1px solid #000000;
   background-color:#CCC;
   border-radius: 5px;
}

#divNumber1 {
   position: absolute;
   top: 150px;
   left: 10px;
   width: 24px;
   height: 24px;
   border: 1px solid #000000;
   background-color:#CCC;
   border-radius: 5px;
}

#divNumber2 {
   position: absolute;
   top: 150px;
   left: 44px;
   width: 24px;
   height: 24px;
   border: 1px solid #000000;
   background-color:#CCC;
   border-radius: 5px;
}

#divNumber3 {
   position: absolute;
   top: 150px;
   left: 78px;
   width: 24px;
   height: 24px;
   border: 1px solid #000000;
   background-color:#CCC;
   border-radius: 5px;
}

#divNumber4 {
   position: absolute;
   top: 120px;
   left: 10px;
   width: 24px;
   height: 24px;
   border: 1px solid #000000;
   background-color:#CCC;
   border-radius: 5px;
}

#divNumber5 {
   position: absolute;
   top: 120px;
   left: 44px;
   width: 24px;
   height: 24px;
   border: 1px solid #000000;
   background-color:#CCC;
   border-radius: 5px;
}

#divNumber6 {
   position: absolute;
   top: 120px;
   left: 78px;
   width: 24px;
   height: 24px;
   border: 1px solid #000000;
   background-color:#CCC;
   border-radius: 5px;
}

#divNumber7 {
   position: absolute;
   top: 90px;
   left: 10px;
   width: 24px;
   height: 24px;
   border: 1px solid #000000;
   background-color:#CCC;
   border-radius: 5px;
}
#divNumber8 {
   position: absolute;
   top: 90px;
   left: 44px;
   width: 24px;
   height: 24px;
   border: 1px solid #000000;
   background-color:#CCC;
   border-radius: 5px;
}
#divNumber9 {
   position: absolute;
   top: 90px;
   left: 78px;
   width: 24px;
   height: 24px;
   border: 1px solid #000000; 
   background-color:#CCC;
   border-radius: 5px;
}
#divNumber10 {
   position: absolute;
   top: 180px;
   left: 44px;
   width: 24px;
   height: 24px;
   border: 1px solid #000000;
   background-color:#CCC;
   border-radius: 5px;
}

#divNumber0,
#divNumber1,
#divNumber2,
#divNumber3,
#divNumber4,
#divNumber5,
#divNumber6,
#divNumber7,
#divNumber8,
#divNumber9,
#divNumber10 {
   background-image: linear-gradient(right bottom, rgb(0,102,255) 50%, rgb(0,183,250) 52%);
   background-image: -o-linear-gradient(right bottom, rgb(0,102,255) 50%, rgb(0,183,250) 52%);
   background-image: -moz-linear-gradient(right bottom, rgb(0,102,255) 50%, rgb(0,183,250) 52%);
   background-image: -webkit-linear-gradient(right bottom, rgb(0,102,255) 50%, rgb(0,183,250) 52%);
   background-image: -ms-linear-gradient(right bottom, rgb(0,102,255) 50%, rgb(0,183,250) 52%);
   background-image: -webkit-gradient(
      linear,
      right bottom,
      left top,
      color-stop(0.5, rgb(0,102,255)),
      color-stop(0.52, rgb(0,183,250))
   );

}

 

Thanks in advance

 

Regards Niclas Jonsson

Link to comment
https://forums.phpfreaks.com/topic/249114-calculator/
Share on other sites
teynon Member

teynon

Posted
Posted

I am having a hard time looking through your code with all the different variables, so I remade most of it. There is an issue with decimals in javascript though. The precision is a little bit odd. I might not be working with floats right either, though. I'm sure there may be some small glitches concerning decimals.

 

EDIT: Sample I posted was hard to read with all your code. Here is cutouts:

 

Javascript:

 

<script>
var value = 1;
var operator = 0;
var last = 0;
var point = false;
var precision = 0;
var rawValue1 = 0;
var rawValue2 = 0;
var value1 = 0;
var value2 = 0;

function AddNumber(number) {
if (number != 10) {
	rawValue = rawValue2;
	if (value == 1) {
		rawValue = rawValue1;
	}
	if (point) {
		precision++;
	}
	rawValue *= 10;
	rawValue += number;
	current = rawValue;
	if (value == 1) {
		rawValue1 = rawValue;
		value1 = parseFloat(current) / parseFloat(Math.pow(10,precision));
		current = parseFloat(current) / parseFloat(Math.pow(10,precision));
	}
	else {
		rawValue2 = rawValue;
		value2 = parseFloat(current) / parseFloat(Math.pow(10,precision));
		current = parseFloat(current) / parseFloat(Math.pow(10,precision));
	}
	document.getElementById('Result').innerHTML = current;
}
else {
	point = true;
}
}
function ChooseCalc(type) {
if (value == 1) {
	value = 2;
	operator = type;
	precision = 0;
	point = false;
}
else if (value == 2) {
	current = parseFloat(value1);
	next = parseFloat(value2);
	if (operator == 0) {
		current += next;
	}
	else if (operator == 1) {
		current -= next;
	}
	else if (operator == 2) {
		current *= next;
	}
	else if (operator == 3) {
		current = current / next;
	}
	rawValue1 = current;
	value1 = current;
	document.getElementById('Result').innerHTML = current;
	if (type != 4) {
		operator = type;
	}
	else {
		operator = 0;
		value = 1;
		//document.getElementById('Result').innerHTML = 0;
	}
}
rawValue2 = 0;
precision = 0;
point = false;
}
function ClearResult() {
rawValue1 = 0;
rawValue2 = 0;
precision = 0;
value = 1;
value1 = 0;
value2 = 0;
document.getElementById('Result').innerHTML = 0;
}
</script>

 

HTML inside of BODY tag:

 

<div id="calc-wrapper">
          <div id="Result">
          </div>
          <button id="divCalc0"    onclick="ChooseCalc(0)">   + </button>  
          <button id="divCalc1"    onclick="ChooseCalc(1)">   - </button>
          <button id="divCalc2"    onclick="ChooseCalc(2)">   * </button>
          <button id="divCalc3"    onclick="ChooseCalc(3)">   / </button>

          <button id="divCalc4"    onclick="ChooseCalc(4)">        = </button>
          <button id="divCalc5"    onclick="ClearResult()"> C </button>
  
          <button id="divNumber0"  onclick="AddNumber(0);">   0 </button>
          <button id="divNumber1"  onclick="AddNumber(1)">    1 </button>
          <button id="divNumber2"  onclick="AddNumber(2)">    2 </button>
          <button id="divNumber3"  onclick="AddNumber(3)">    3 </button>
          <button id="divNumber4"  onclick="AddNumber(4)">    4 </button>
          <button id="divNumber5"  onclick="AddNumber(5)">    5 </button>
          <button id="divNumber6"  onclick="AddNumber(6)">    6 </button>
          <button id="divNumber7"  onclick="AddNumber(7)">    7 </button>
          <button id="divNumber8"  onclick="AddNumber(">    8 </button>
          <button id="divNumber9"  onclick="AddNumber(9)">    9 </button>
          <button id="divNumber10" onclick="AddNumber(10)">   . </button>
      </div>

Link to comment
https://forums.phpfreaks.com/topic/249114-calculator/#findComment-1279678
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.