Javascript calculator

Lieke123 · 30 mrt 2011

Hoi allemaal,

Ik moet voor school de volgende opdracht maken:
Maak een rekenmachine.

(....)

Tot slot kan de gebruiker een getal in het display venster via de ATA (Add To Array, dat is een tip) knop opslaan in een “lijst”.
Daar waar de gebruiker met de M+ knop, slechts 1 getal in het geheugen kan plaatsen, kan hij met de ATA knop getallen blijven toevoegen aan de lijst.
De knop CA wist de lijst en de knop SA laat de volledige lijst op het scherm zien.

Alles lukt, behalve het maken van de ATA, CA en SA knop. Wat ik uit de tekst kan opmaken is dat dit met een array moet maar verder dan dat kom ik niet

Ik heb het volgende:

HTML

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Opdracht 2</title>

<script language="Javascript">

var Memory = 0;
var Number1 = "";
var NewNumber = "blank";
var opvalue = "";

function Display(displaynumber) {
document.calculator.answer.value = displaynumber;
}

function MemoryClear() {
Memory = 0;
document.calculator.mem.value = "";
}

function MemoryRecall(answer) {
if(NewNumber != "blank") {
Number2 += answer;
} else {
Number1 = answer;
}
NewNumber = "blank";
Display(answer);
}

function MemoryAdd(answer) {
Memory = Memory + eval(answer);
document.calculator.mem.value = " M ";
NewNumber = "blank";
}

function ClearCalc() {
Number1 = "";
Number2 = "";
NewNumber = "blank";
Display("");
}

function CheckNumber(answer) {
if(answer == ".") {
Number = document.calculator.answer.value;
if(Number.indexOf(".") != -1) {
answer = "";
   }
}
if(NewNumber == "yes") {
Number2 += answer;
Display(Number2);
}
else {
if(NewNumber == "blank") {
Number1 = answer;
Number2 = "";
NewNumber = "no";
}
else {
Number1 += answer;
}
Display(Number1);
   }
}

function AddButton(x) {
if(x == 1) EqualButton();
if(Number2 != "") {
Number1 = parseFloat(Number1) + parseFloat(Number2);
}
NewNumber = "yes";
opvalue = '+';
Display(Number1);
}

function SubButton(x) {
if(x == 1) EqualButton();
if(Number2 != "") {
Number1 = parseFloat(Number1) - parseFloat(Number2);
}
NewNumber = "yes";
opvalue = '-';
Display(Number1);
}

function MultButton(x) {
if(x == 1) EqualButton();
if(Number2 != "") {
Number1 = parseFloat(Number1) * parseFloat(Number2);
}
NewNumber = "yes";
opvalue = '*';
Display(Number1);
}

function DivButton(x) {
if(x == 1) EqualButton();
if(Number2 != "") {
Number1 = parseFloat(Number1) / parseFloat(Number2);
}
NewNumber = "yes";
opvalue = '/';
Display(Number1);
}

function SqrtButton() {
Number1 = Math.sqrt(Number1);
NewNumber = "blank";
Display(Number1);
}

function PercentButton() {
if(NewNumber != "blank") {
Number2 *= .01;
NewNumber = "blank";
Display(Number2);
   }
}

function EqualButton() {
if(opvalue == '+') AddButton(0);
if(opvalue == '-') SubButton(0);
if(opvalue == '*') MultButton(0);
if(opvalue == '/') DivButton(0);
Number2 = "";
opvalue = "";
}

</script>

<link type="text/css" rel="stylesheet" href="opdracht2.css"/>
</head>

<body>
<center>
<form name="calculator">
<table border=1>
<tr><td>
<input type="text" name="answer" size=37 style="height:30px" onChange="CheckNumber(this.value)">
</td></tr>
<tr><td>
<center>
<input type="reset" name="C" style="width:54px" value=" C " class="rood" onClick="ClearCalc(); return false;">
<input type="button" name="Mplus" style="width:53px" value=" M+ " class="rood" onClick="MemoryAdd(document.calculator.answer.value); return false;">
<input type="button" name="MR" style="width:53px" value=" MR " class="rood" onClick="MemoryRecall(Memory); return false;">
<input type="button" name="MC" style="width:54px" value=" MC " class="rood" onClick="MemoryClear(); return false;">
</center>
</td></tr>
<br />
<tr><td>
<center>
<input type="button" name="1" style="width:42px" value=" 1 " class="blauw" onClick="CheckNumber('1'); return false;">
<input type="button" name="2" style="width:42px" value=" 2 " class="blauw" onClick="CheckNumber('2'); return false;">
<input type="button" name="3" style="width:42px" value=" 3 " class="blauw" onClick="CheckNumber('3'); return false;">
<input type="button" name="optellen" style="width:42px" value=" + " class="rood" onClick="AddButton(1); return false;">
<input type="button" name="delen" style="width:42px" value=" / " class="rood" onClick="DivButton(1); return false;">
<br />
<input type="button" name="4" style="width:42px" value=" 4 " class="blauw" onClick="CheckNumber('4'); return false;">
<input type="button" name="5" style="width:42px" value=" 5 " class="blauw" onClick="CheckNumber('5'); return false;">
<input type="button" name="6" style="width:42px" value=" 6 " class="blauw" onClick="CheckNumber('6'); return false;">
<input type="button" name="aftrekken" style="width:42px" value=" - " class="rood" onClick="SubButton(1); return false;">
<input type="button" name="percentage berekenen" style="width:42px" value=" % " class="rood" onClick="PercentButton(); return false;">
<br />
<input type="button" name="7" style="width:42px" value=" 7 " class="blauw" onClick="CheckNumber('7'); return false;">
<input type="button" name="8"  style="width:42px" value=" 8 " class="blauw" onClick="CheckNumber('8'); return false;">
<input type="button" name="9" style="width:42px" value=" 9 " class="blauw" onClick="CheckNumber('9'); return false;">
<input type="button" name="vermenigvuldigen" style="width:42px" value=" * " class="rood" onClick="MultButton(1); return false;">
<input type="button" name="worteltrekken" style="width:42px" value=" √ " class="rood" onClick="SqrtButton(); return false;">
<br />
<input type="button" name="0" style="width:88px" value="  0  " class="blauw" onClick="CheckNumber('0'); return false;">
<input type="button" name="komma" style="width:42px" value=" ,  " class="blauw" onClick="CheckNumber('.'); return false;">
<input type="button" name="uitkomst" style="width:88px" value="  =  " class="rood" onClick="EqualButton(); return false;">
<br />
</center>
</td></tr>
</table>
</form>
</center>

</body>
</html>

CSS

Code:

@charset "utf-8";
/* CSS Document */



.rood {
	color:#F00;
	font-family:calibri;
	font-size:20px;
}

.blauw {
	color:#00F;
	font-family:calibri;
	font-size:20px;
}

Kan iemand mij hiermee helpen?

Groetjes,
Lieke

That Guy · 30 mrt 2011

Yup, dat is het precies. Je maakt een array:[JS]var ATA = [];[/JS]en vervolgens kan je toevoegen/weghalen:[JS]function CA()
{
ATA = []; // maak leeg (eigenlijk maak je het een 'nieuwe' array, dus oude wordt vergeten)
}

function SA()
{
var i, len = ATA.length;

for(i=0; i<len; i++)
{
output += ATA + ', '; // oid
}
}

function voegAanATAToe(waarde)
{
ATA.push(waarde); // .push en .pop zijn native Array methods
}

function haalLaatsteATAOp()
{
return ATA.pop();
}[/JS]zie ook hier.

:thumb:

Lieke123 · 30 mrt 2011

Superbedankt!

Ik snap nu alleen nog niet hoe ik de array moet linken aan de buttons?

Ik heb nu dit, maar zo werkt t nog niet

HTML:

<tr><td>
<center>
<input type="button" name="ATA" style="width:73px" value=" ATA " class="rood" onClick="voegAanATAToe(); return false;">
<input type="button" name="CA" style="width:73px" value=" CA " class="rood" onClick="CA(); return false;">
<input type="button" name="SA" style="width:73px" value=" SA " class="rood" onClick="SA(); return false;">
</center>
</td></tr>
<br />

That Guy · 30 mrt 2011

voegAanATAToe() heeft als parameter waarde, dus die moet je wel meegeven in je button's onclick.

In de SA functie moet je wel het output-gedeelte anders maken.

Lieke123 · 8 apr 2011

Sorry het lukt me nog niet, welke var moet ik invullen ipv de waarde? En wat bedoel je met het outputgedeelte anders maken?
Nogmaals bedankt voor je hulp!

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gevordere Opdracht 2</title>

<script language="Javascript">

var Memory = 0;
var Number1 = "";
var NewNumber = "blank";
var opvalue = "";
var ATA = [];

function Display(displaynumber) {
document.calculator.answer.value = displaynumber;
}

function MemoryClear() {
Memory = 0;
document.calculator.mem.value = "";
}

function MemoryRecall(answer) {
if(NewNumber != "blank") {
Number2 += answer;
} else {
Number1 = answer;
}
NewNumber = "blank";
Display(answer);
}

function MemoryAdd(answer) {
Memory = Memory + eval(answer);
document.calculator.mem.value = " M ";
NewNumber = "blank";
}

function ClearCalc() {
Number1 = "";
Number2 = "";
NewNumber = "blank";
Display("");
}

function CheckNumber(answer) {
if(answer == ".") {
Number = document.calculator.answer.value;
if(Number.indexOf(".") != -1) {
answer = "";
   }
}
if(NewNumber == "yes") {
Number2 += answer;
Display(Number2);
}
else {
if(NewNumber == "blank") {
Number1 = answer;
Number2 = "";
NewNumber = "no";
}
else {
Number1 += answer;
}
Display(Number1);
   }
}

function AddButton(x) {
if(x == 1) EqualButton();
if(Number2 != "") {
Number1 = parseFloat(Number1) + parseFloat(Number2);
}
NewNumber = "yes";
opvalue = '+';
Display(Number1);
}

function SubButton(x) {
if(x == 1) EqualButton();
if(Number2 != "") {
Number1 = parseFloat(Number1) - parseFloat(Number2);
}
NewNumber = "yes";
opvalue = '-';
Display(Number1);
}

function MultButton(x) {
if(x == 1) EqualButton();
if(Number2 != "") {
Number1 = parseFloat(Number1) * parseFloat(Number2);
}
NewNumber = "yes";
opvalue = '*';
Display(Number1);
}

function DivButton(x) {
if(x == 1) EqualButton();
if(Number2 != "") {
Number1 = parseFloat(Number1) / parseFloat(Number2);
}
NewNumber = "yes";
opvalue = '/';
Display(Number1);
}

function SqrtButton() {
Number1 = Math.sqrt(Number1);
NewNumber = "blank";
Display(Number1);
}

function PercentButton() {
if(NewNumber != "blank") {
Number2 *= .01;
NewNumber = "blank";
Display(Number2);
   }
}

function EqualButton() {
if(opvalue == '+') AddButton(0);
if(opvalue == '-') SubButton(0);
if(opvalue == '*') MultButton(0);
if(opvalue == '/') DivButton(0);
Number2 = "";
opvalue = "";
}

 
 function CA()
{
   ATA = [];  
}
 
function SA()
{
   var i, len = ATA.length;
 
   for(i=0; i<len; i++)
   {
      output += ATA[i] + ', ';   // oid
   }
}
 
function voegAanATAToe(waarde)
{
   ATA.push(waarde);  
}
 
function haalLaatsteATAOp()
{
   return ATA.pop();
}

</script>

<link type="text/css" rel="stylesheet" href="opdracht2.css"/>
</head>

<body>
<center>
<form name="calculator">
<table border=1>
<tr><td>
<input type="text" name="answer" size=37 style="height:30px" onChange="CheckNumber(this.value)">
</td></tr>
<tr><td>
<center>
<input type="reset" name="C" style="width:54px" value=" C " class="rood" onClick="ClearCalc(); return false;">
<input type="button" name="Mplus" style="width:53px" value=" M+ " class="rood" onClick="MemoryAdd(document.calculator.answer.value); return false;">
<input type="button" name="MR" style="width:53px" value=" MR " class="rood" onClick="MemoryRecall(Memory); return false;">
<input type="button" name="MC" style="width:54px" value=" MC " class="rood" onClick="MemoryClear(); return false;">
</center>
</td></tr>
<br />


<tr><td>
<center>
<input type="button" name="ATA" style="width:73px" value=" ATA " class="rood" onClick="voegAanATAToe(waarde); return false;">
<input type="button" name="CA" style="width:73px" value=" CA " class="rood" onClick="CA(); return false;">
<input type="button" name="SA" style="width:73px" value=" SA " class="rood" onClick="SA(); return false;">
</center>
</td></tr>
<br />


<tr><td>
<center>
<input type="button" name="1" style="width:42px" value=" 1 " class="blauw" onClick="CheckNumber('1'); return false;">
<input type="button" name="2" style="width:42px" value=" 2 " class="blauw" onClick="CheckNumber('2'); return false;">
<input type="button" name="3" style="width:42px" value=" 3 " class="blauw" onClick="CheckNumber('3'); return false;">
<input type="button" name="optellen" style="width:42px" value=" + " class="rood" onClick="AddButton(1); return false;">
<input type="button" name="delen" style="width:42px" value=" / " class="rood" onClick="DivButton(1); return false;">
<br />
<input type="button" name="4" style="width:42px" value=" 4 " class="blauw" onClick="CheckNumber('4'); return false;">
<input type="button" name="5" style="width:42px" value=" 5 " class="blauw" onClick="CheckNumber('5'); return false;">
<input type="button" name="6" style="width:42px" value=" 6 " class="blauw" onClick="CheckNumber('6'); return false;">
<input type="button" name="aftrekken" style="width:42px" value=" - " class="rood" onClick="SubButton(1); return false;">
<input type="button" name="percentage berekenen" style="width:42px" value=" % " class="rood" onClick="PercentButton(); return false;">
<br />
<input type="button" name="7" style="width:42px" value=" 7 " class="blauw" onClick="CheckNumber('7'); return false;">
<input type="button" name="8"  style="width:42px" value=" 8 " class="blauw" onClick="CheckNumber('8'); return false;">
<input type="button" name="9" style="width:42px" value=" 9 " class="blauw" onClick="CheckNumber('9'); return false;">
<input type="button" name="vermenigvuldigen" style="width:42px" value=" * " class="rood" onClick="MultButton(1); return false;">
<input type="button" name="worteltrekken" style="width:42px" value=" √ " class="rood" onClick="SqrtButton(); return false;">
<br />
<input type="button" name="0" style="width:88px" value=" 0 " class="blauw" onClick="CheckNumber('0'); return false;">
<input type="button" name="komma" style="width:42px" value=" , " class="blauw" onClick="CheckNumber('.'); return false;">
<input type="button" name="uitkomst" style="width:88px" value=" = " class="rood" onClick="EqualButton(); return false;">
<br />
</center>
</td></tr>
</table>
</form>
</center>

</body>
</html>

Code:

@charset "utf-8";
/* CSS Document */



.rood {
	color:#F00;
	font-family:calibri;
	font-size:20px;
}

.blauw {
	color:#00F;
	font-family:calibri;
	font-size:20px;
}

Javascript calculator

Lieke123

Nieuwe gebruiker

That Guy

Meubilair

Lieke123

Nieuwe gebruiker

That Guy

Meubilair

Lieke123

Nieuwe gebruiker

Nieuwste berichten

Wij waarderen jouw privacy