Javascript Calculator Help - Topic

Member

Posts: 17,596

Joined: Mar 13 2009

Gold: 0.00

Sep 10 2015 08:30pm

I need help with my calculator app. When the calculator pops up it doesn't display the numbers when the keys are pressed.

When I inspect element and go to console it says that:
Uncaught ReferenceError: answer is not defined
Uncaught ReferenceError: backspace is not defined
Uncaught ReferenceError: addtoscreen is not defined

How would I fix the code so that the screen displays the numbers? Thanks in advance.

CSS CODE

Code

#calculator {
width: 250px;
height: 350px;
border: 5px solid black;
text-align: center;
background: lightblue;
margin: 150px auto;
}

#display {
margin-top: 30px;
margin-bottom: 20px;
width: 220px;
height: 30px;
border: 1px solid red;
text-align: right;
font: 20px bold;
color: black;
}

#keys {
width: 41px;
height: 35px;
margin-left: 10px;
margin-bottom: 20px;
cursor: pointer;
}

#keys:hover {
background: yellow;
font-weight: bold;
}

#equal {
width: 41px;
height: 35px;
margin-left: 10px;
margin-bottom: 20px;
cursor: pointer;
}

#equal:hover {
background: yellow;
font-weight: bold;
}

HTML CODE

Code

<head>
<title>Calculator</title>
</head>

<body>
{{> calculator}}
</body>

<template name="calculator">
<div id="calculator">
<form>
<input type="text" id="display" disabled><br>

<input type="button" value="<--" id="keys" onClick="backspace()">
<input type="button" value="C" id="keys" onClick="addtoscreen('c')">
<input type="button" value="%" id="keys" onClick="addtoscreen('%')">
<input type="button" value="MR" id="keys" onClick="addtoscreen('MR')"><br>

<input type="button" value="7" id="keys" onClick="addtoscreen('7')">
<input type="button" value="8" id="keys" onClick="addtoscreen('8')">
<input type="button" value="9" id="keys" onClick="addtoscreen('9')">
<input type="button" value="/" id="keys" onClick="addtoscreen('/')"><br>

<input type="button" value="4" id="keys" onClick="addtoscreen('4')">
<input type="button" value="5" id="keys" onClick="addtoscreen('5')">
<input type="button" value="6" id="keys" onClick="addtoscreen('6')">
<input type="button" value="*" id="keys" onClick="addtoscreen('*')"><br>

<input type="button" value="1" id="keys" onClick="addtoscreen('1')">
<input type="button" value="2" id="keys" onClick="addtoscreen('2')">
<input type="button" value="3" id="keys" onClick="addtoscreen('3')">
<input type="button" value="-" id="keys" onClick="addtoscreen('-')"><br>

<input type="button" value="0" id="keys" onClick="addtoscreen('0')">
<input type="button" value="." id="keys" onClick="addtoscreen('.')">
<input type="button" value="+" id="keys" onClick="addtoscreen('+')">
<input type="button" value="=" id="equal" onClick="answer()">
</form>
</div>
</template>

JAVASCRIPT CODE

Code

if (Meteor.isClient) {

var x;
var box=document.getElementById('nums');

Template.calculator.events({

'click keys': function addtoscreen(x) {
box.value +=x;
if(x=='c') {
box.value='';
}else if (x=='<--') {
var number=box.value;
var len=number.length-1;
var newnumber=number.substring(0,len);
box.value=newnumber;
}
},

'click equal': function answer() {
x=box.value;
x=eval(x);
box.value=x;
}

});

}

carteblanche

Member

Posts: 32,925

Joined: Jul 23 2006

Gold: 3,804.50

Sep 10 2015 08:47pm

i dont know anything about meteorjs, but i have some thoughts.

1) i dont see a backspace function anywhere in your code, but you're referencing it in your html onClick.
2) from context, i'm assuming:

Code

'click equal'

adds an event listener to the click event for the id [equal]. a brief google search suggests you should do:

Code

'click #equal'

3) if your js is adding an event listener to the equal button, then why are you setting onClick in your html? try removing it from the html.
from:

Code

to:

Code

4) i suspect it can't find the function because of how you defined your function. i doubt you're supposed to pass your parameter via onClick like that. a brief google search found this: http://stackoverflow.com/questions/29411570/how-to-pass-parameters-to-template-event-in-meteor
Alternatively, you can probably reference the html input directly inside the function. either it's a parameter to the function (perhaps an event source?) or you can reference it via this

you should really add some sort of logging / debug capability so you can troubleshoot this stuff.

This post was edited by carteblanche on Sep 10 2015 08:50pm

CPK001

Member

Posts: 17,596

Joined: Mar 13 2009

Gold: 0.00

Sep 10 2015 09:58pm

Thanks for the help. That has fixed the reference error. A new problem is now where it says:

Uncaught TypeError: Cannot read property 'value' of null

So it can't read the characters when they are clicked. Why would it fail to read the value?

HTML CODE

Code

JAVASCRIPT CODE

Code

if (Meteor.isClient) {

var x;
var box=document.getElementById('display');

Template.calculator.events({

'click #keys': function () {
box.value +=x;
if(x=='c') {
box.value='';
}
},

'click #equal': function () {
x=box.value;
x=eval(x);
box.value=x;
},

'click #backspace': function () {
x==('<--');
var number=box.value;
var len=number.length-1;
var newnumber=number.substring(0,len);
box.value=newnumber;
}

});

}

carteblanche

Member

Posts: 32,925

Joined: Jul 23 2006

Gold: 3,804.50

Sep 10 2015 10:12pm

Quote

Uncaught TypeError: Cannot read property 'value' of null

So it can't read the characters when they are clicked. Why would it fail to read the value?

it sounds to me that you're asking the wrong question. instead of asking why it can't read the value, you should be asking why it can't find your element by id "display". or is it finding the box, but box is out of scope? you need to debug / log, man.

on another note, looks like you're using some old school html. you should get out of that habit. you're not closing your tags and the way you use disabled.

This post was edited by carteblanche on Sep 10 2015 10:20pm

Go Back To Programming & Development Topic List