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

Question

所以我是 javascript 的新手，我正在练习事件处理程序。我在按下按钮时创建了事件处理程序，但没有任何反应。我试图在网上查看计算器，但它们都使用 jquery 或内联 js！我想避免这些，因为我想在事件处理程序方面做得更好。这是我正在处理按钮 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>

以下是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

多个问题：

addEventListener 拼写错误。
var memory 需要在 init() 函数定义之前，而不是它所在的位置。
0 按钮只有一个事件侦听器
没有带有 id="display"

一般来说，您必须学会查看浏览器中的错误控制台，因为所有这些语法和运行-time 错误都会显示在错误控制台中。

Answer 2

我认为脚本标签要么遗漏了，要么是您放入 calculator.js 文件的内容。

两个值得注意的错误是 - 1. addEventListener 输入错误 2. var memory 应该是全局的或者把它放在函数中

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

所以之后只会在您的代码中出现逻辑错误。

Answer 3

正如其他人所说，您的代码中存在一些错误。这是我对您的 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);

和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>

需要将 ID "display" 添加到 getElementById('display') 选择器的输入中，并删除 n4 按钮上的第二个。

这是一个工作 fiddle 控制台日志 https://jsfiddle.net/qdpo9gtt/

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

simple javascript calculator using event handlers

javascript

html

calculator