簡單的JavaScript計算器使用事件處理程序

所以我是新來的JavaScript和我正在練習事件處理程序。我按下按鈕時創建了事件處理程序，但沒有任何反應。我試圖在網上查看計算器，但他們都使用jQuery或內聯js！我想避免這些，因爲我試圖在事件處理程序中變得更好。這裏是我的按鈕0使用的代碼，ID爲「NO：簡單的JavaScript計算器使用事件處理程序

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

來源

2015-07-22 Jim

你的JavaScript應該有'<腳本類型=「文/ JavaScript的」>'纏着如果它會在你的HTML文件或在一個單獨的.js文件 –

我很抱歉我最初發布的不正確，但已在此帖子中更正。該JavaScript是在一個單獨的.js文件中。謝謝你的時間。但是代碼仍然不起作用。 – Jim

另外，變量不是全局的。如果您在函數之前的代碼頂部聲明瞭var內存，否則內存變量超出了第二個函數的範圍。另外我建議使用onClick（）。 – tash

多個問題：

的addEventListener
var memory需要在init()功能定義之前，而不是它在哪裏
你只需要一個事件偵聽0按鈕
有與id="display"

一般無元素，你必須學會看錯誤控制檯瀏覽器，因爲所有這些語法和運行時錯誤將顯示在錯誤控制檯中。

來源

2015-07-22 01:02:33 jfriend00

哦，對不起，腳本src =「calculator.js」包含我放在底部的javascript代碼，我不太確定如何將它寫在這裏。 – Jim

神聖莫里非常感謝你。第一次發佈在stackoverflow，肯定會練習更多。並且謝謝你！不能相信我拼錯，並沒有意識到我沒有設置顯示ID。你的答案解決了它！再次感謝。 – Jim

我認爲腳本標記或者錯過了，或者它是您在calculator.js文件中放置的內容。

兩個顯着的錯誤是 - 1的addEventListener被輸錯 2. VAR內存應該是全球性或因此以後將只有在你的代碼的邏輯錯誤提出，在功能

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

。

來源

2015-07-22 01:09:59

謝謝。兩者都已找到並修復！ – Jim

所以，你可以請upvote我的回答:) –

正如其他人所說，你的代碼有一些錯誤。這是我給你的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（「顯示」）選擇和刪除第二個是n4按鈕。

這裏的工作撥弄控制檯日誌https://jsfiddle.net/qdpo9gtt/

來源

2015-07-22 01:33:37

簡單的JavaScript計算器使用事件處理程序

回答

相關問題