使用事件處理程序的簡單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"

通常，您必須學習在瀏覽器中查看錯誤控制台，因為所有這些語法和運行時錯誤都將顯示在錯誤控制台中。

Answer 2

我認為腳本標記要么丟失，要么是您放在Calculator.js文件中的內容。

兩個值得注意的錯誤是-1. addEventListener的類型錯誤2. var內存應該是全局的，或者應該放在函數中

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“顯示”添加到getElementById（'display'）選擇器的輸入中，並刪除n4按鈕上的第二個。

這是帶有控制台日志的工作提琴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