CODEWITHSUNDEEP
javascripthtmlcalculator
Jim
Jim

Reputation: 27

simple javascript calculator using event handlers

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);

Upvotes: 1

Views: 4950

Answers (3)

Matt Patrick
Matt Patrick

Reputation: 31

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/

Upvotes: 0

paraS elixiR
paraS elixiR

Reputation: 2764

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.

Upvotes: 0

jfriend00
jfriend00

Reputation: 707786

Multiple problems:

  1. addEventListener is mispelled.
  2. var memory needs to be before the init() function definition, not where it is.
  3. You only have one event listener for the 0 button
  4. 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.

Upvotes: 2

Related Questions