Jump to content

calculator

niclas.jonsson1992

By niclas.jonsson1992
in Javascript Help

 Share

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
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
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.