Question

所以我是javascript的新手，我正在练习事件处理程序。我按下按钮时创建了事件处理程序但没有任何反应。我试着在网上看计算器，但他们都使用jquery或内联js！我想避免那些因为我试图在事件处理程序上变得更好。这是我在按钮0上工作的代码，ID为＃34; n0：

inline

以下是calculator.js的内容：

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

Answer 1

多个问题：

addEventListener拼写错误。
var memory需要在init()函数定义之前，而不是它的位置。
0按钮
没有id="display"

通常，您必须学会在浏览器中查看错误控制台，因为所有这些语法和运行时错误都将显示在错误控制台中。

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＆＃34;显示＆＃34;添加到getElementById（＆＃39; display＆＃39;）选择器的输入中，并在n4按钮上删除第二个。

这是控制台日志https://jsfiddle.net/qdpo9gtt/

的工作小提琴

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

3 个答案: