使用事件处理程序的简单JavaScript计算器

Question

So I am new to javascript and I am practicing event handlers. 因此，我是javascript新手，正在练习事件处理程序。 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! 我试图在线查看计算器，但是它们都使用jquery或内联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: 这是我在按钮0上工作的代码，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: 以下是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);

Answer 1

Multiple problems: 多个问题：

addEventListener is mispelled. addEventListener拼写错误。
var memory needs to be before the init() function definition, not where it is. var memory需要在init()函数定义之前，而不是在哪里。
You only have one event listener for the 0 button 您只有0按钮的事件监听器
There's no element with an id="display" 没有任何元素的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. 通常，您必须学习在浏览器中查看错误控制台，因为所有这些语法和运行时错误都将显示在错误控制台中。

Answer 2

I think script tag is either missed or it is the content you have put in calculator.js file. 我认为脚本标记要么丢失，要么是您放在Calculator.js文件中的内容。

Two notable errors are - 1. addEventListener is mistyped 2. var memory should be either global or put that in the function 两个值得注意的错误是-1. addEventListener的类型错误2. var内存应该是全局的，或者应该放在函数中

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

So after that there will be logical errors only in your code. 因此之后，仅在您的代码中将存在逻辑错误。

Answer 3

As the other guys have said, there is a few errors in your code. 正如其他人所说，您的代码中有一些错误。 Here's the fixes I made to your javascript: 这是我对您的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: 和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. 需要将id“显示”添加到getElementById（'display'）选择器的输入中，并删除n4按钮上的第二个。

Here's a working fiddle with console logs https://jsfiddle.net/qdpo9gtt/ 这是带有控制台日志的工作提琴https://jsfiddle.net/qdpo9gtt/

使用事件处理程序的简单JavaScript计算器

问题描述

3 个解决方案

解决方案1
2 已采纳 2015-07-22 01:02:33

解决方案2
0 2015-07-22 01:09:59

解决方案3
0 2015-07-22 01:33:37

使用事件处理程序的简单JavaScript计算器

问题描述

3 个解决方案

解决方案1 2 已采纳 2015-07-22 01:02:33

解决方案2 0 2015-07-22 01:09:59

解决方案3 0 2015-07-22 01:33:37

解决方案1
2 已采纳 2015-07-22 01:02:33

解决方案2
0 2015-07-22 01:09:59

解决方案3
0 2015-07-22 01:33:37