simple javascript calculator using event handlers

Question

So I am new to javascript and I am practicing event handlers. I created the event handler when the button is pressed but nothing happens. I tried to look at calculators online but they are all using jquery or inline js! I want to avoid those since I am trying to get better at event handlers. Here is the code I am working on the button 0, with id "n0:

<!DOCTYPE html>
<html>
    <head>
        <title>
            My Javascript Calculator
        </title>
    </head>

    <body>
        <div id="calculator">
            <input type="text" name="display" disabled>
            <br>
            <div id="keypad">
                <button id="clrEntry">CE</button>
                <button id="clear">C</button>
                <button id="divide">/</button>
                <button id="multiply">*</button>
                <br>
                <button id="n1">1</button>
                <button id="n2">2</button>
                <button id="n3">3</button>
                <button id="add">+</button>
                <br>
                <button id="n4">4</button></button>
                <button id="n5">5</button>
                <button id="n6">6</button>
                <button id="subtract">-</button>
                <br>
                <button id="n7">7</button>
                <button id="n8">8</button>
                <button id="n9">9</button>
                <button id="equal">=</button>
                <br>
                <button id="n0">0</button>
            </div>
        </div>
        <script src="calculator.js"></script>
    </body>
</html>

Here are the contents of calculator.js:

    function init()
    var memory;
    {
        document.getElementById('n0').addEventListner("click", number0);

    }

function number0()
    {
        document.getElementById('display').value += 0;
        memory += 0;
        return 0;
    }

window.addEventListner("load", init, false);

Your JavaScript should have <script type="text/javascript"> wrapped around it if it will be in your html file or be in a separate .js file — Zack Macomber
– Zack Macomber, Commented Jul 22, 2015 at 1:03
I apologize I originally post it incorrect, but it has been corrected in this post. The javascript is in a separate .js file. Thanks for your time. But the code still doesnt work. — Jim
– Jim, Commented Jul 22, 2015 at 1:07
Also, variables aren't global. If you declare var memory at the top of the code before your functions, otherwise the memory variable is out of scope of second function. Also I'd recommend using onClick(). — tash
– tash, Commented Jul 22, 2015 at 1:07
Try changing addEventListner to addEventListener. Besides that, it looks like your variable memory should be declared before you do function init(). A JavaScript console can tell you where the errors are; try using one, every modern browser has one. Good luck :) — Oscar
– Oscar, Commented Jul 22, 2015 at 1:08

jfriend00 · Accepted Answer · 2015-07-22 01:06:48Z

2

Multiple problems:

addEventListener is mispelled.
var memory needs to be before the init() function definition, not where it is.
You only have one event listener for the 0 button
There's no element with an id="display"

In general, you MUST learn to look at the error console in the browser because all these syntax and run-time errors will be show in the error console.

edited Jul 22, 2015 at 1:06

answered Jul 22, 2015 at 1:02

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jim Over a year ago

Oh Im sorry the script src="calculator.js" contains the javascript code I put at the bottom, I wasnt too sure how to write it on here.

Jim Over a year ago

Holy moly thank you so much. First time post in stackoverflow, will definitely practice more. AND thank you! Can't believed I misspelled and didnt realize I didn't set the display id. You're answer fixed it! Thanks again.

paraS elixiR · Accepted Answer · 2015-07-22 01:09:59Z

0

I think script tag is either missed or it is the content you have put in calculator.js file.

Two notable errors are - 1. addEventListener is mistyped 2. var memory should be either global or put that in the function

function init()
{
       var memory;
   ...
}

So after that there will be logical errors only in your code.

answered Jul 22, 2015 at 1:09

paraS elixiR

3,0183 gold badges27 silver badges31 bronze badges

1 Comment

Jim Over a year ago

Thank you. Both have been found and fixed!

Matt Patrick · Accepted Answer · 2015-07-22 01:33:37Z

As the other guys have said, there is a few errors in your code. Here's the fixes I made to your javascript:

var memory;  //this needs to be declared before starting the function  

function init() {
    document.getElementById('n0').addEventListener("click", number0, false); //addEventListener was misspelt
}

function number0() {
    document.getElementById('display').value += 0;
    memory += 0;
    return 0;
}

window.addEventListener("load", init(), false);

and to the html:

<div id="calculator">
    <input type="text" name="display" id="display" disabled /> 
    <br>
    <div id="keypad">
        <button id="clrEntry">CE</button>
        <button id="clear">C</button>
        <button id="divide">/</button>
        <button id="multiply">*</button>
        <br>
        <button id="n1">1</button>
        <button id="n2">2</button>
        <button id="n3">3</button>
        <button id="add">+</button>
        <br>
        <button id="n4">4</button>
        <button id="n5">5</button>
        <button id="n6">6</button>
        <button id="subtract">-</button>
        <br>
        <button id="n7">7</button>
        <button id="n8">8</button>
        <button id="n9">9</button>
        <button id="equal">=</button>
        <br>
        <button id="n0">0</button>
    </div>
</div>

Needed the id "display" added to the input for the getElementById('display') selector and removed the second on the n4 button.

Here's a working fiddle with console logs https://jsfiddle.net/qdpo9gtt/

Collectives™ on Stack Overflow

simple javascript calculator using event handlers

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related