爲什麼計算器工作不正常？

Question

我想讓我的第一個計算器與香草JS。我的邏輯如下。

• 你一個數字（1/2）
• 你打一個符號（正/負）點擊
• 你點擊第二個數字
• 你打等號，並得到一個答案。

我的等號按鈕通過加號和減號獲得不同的功能。但是，它不能正常工作。 1 - 2 = -1但後來當你做+2它得到-3而不是1。

出了什麼問題？

var screen = document.getElementById('hres'); 
 
var numI = 0; 
 
var numII = 0; 
 

 
document.getElementById('one').addEventListener("click", uno); 
 

 
function uno() { 
 
    screen.value = 1; 
 
} 
 

 
document.getElementById('two').addEventListener("click", duo); 
 

 
function duo() { 
 
    screen.value = 2; 
 
} 
 

 
function plus() { 
 
    numI = screen.value; 
 
    document.getElementById('eql').addEventListener('click', equalP); 
 
} 
 

 
function equalP() { 
 
    numII = screen.value; 
 
    screen.value = +numI + +numII; 
 
} 
 

 
function minus() { 
 
    numI = screen.value; 
 
    document.getElementById('eql').addEventListener('click', equalM); 
 
} 
 

 
function equalM() { 
 
    numII = screen.value; 
 
    screen.value = numI - numII; 
 
}

#hres { 
 
    position: relative; 
 
    text-align: center; 
 
    line-height: 50px; 
 
    font-size: 22pt; 
 
    width: 200px; 
 
    height: 50px; 
 
    margin-bottom: 65px; 
 
} 
 

 
#sum { 
 
    display: inline-block; 
 
    font-size: 20pt; 
 
    border: 2px solid black; 
 
    margin: 5px; 
 
    text-align: center; 
 
    line-height: 50px; 
 
    width: 200px; 
 
    height: 50px; 
 
    background-color: goldenrod; 
 
} 
 

 
#one { 
 
    display: inline-block; 
 
    font-size: 20pt; 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: hotpink; 
 
    text-align: center; 
 
    line-height: 50px; 
 
    border: 2px solid black; 
 
} 
 

 
#two { 
 
    display: inline-block; 
 
    font-size: 20pt; 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: hotpink; 
 
    text-align: center; 
 
    line-height: 50px; 
 
    border: 2px solid black; 
 
} 
 

 
#eql { 
 
    display: inline-block; 
 
    font-size: 20pt; 
 
    border: 2px solid black; 
 
    margin: 5px; 
 
    text-align: center; 
 
    line-height: 50px; 
 
    width: 200px; 
 
    height: 50px; 
 
    background-color: skyblue; 
 
    transition: .3s; 
 
} 
 

 
#sub { 
 
    display: inline-block; 
 
    font-size: 20pt; 
 
    border: 2px solid black; 
 
    margin: 5px; 
 
    text-align: center; 
 
    line-height: 50px; 
 
    width: 200px; 
 
    height: 50px; 
 
    background-color: lightgray; 
 
}

<input id="hres" readonly></input><br> 
 
<div id="one">1</div> 
 
<div id="two">2</div><br> 
 
<button onclick="plus()" id="sum">+</button> 
 
<button onclick="minus()" id="sub">-</button> 
 
<button id="eql">=</button>

Answer 1

首先讓找出問題所在：

1. 您正在註冊的事件偵聽等於按鈕每一次點擊加號或減號。這意味着事件功能將會在註冊時運行多次，並且會影響您的結果
2. 您並未重新調整變量。等於你想NUMI成爲新的總，這樣就可以在NUM2存儲下一個操作的值，然後執行正確的計算上等於

要做到這一點，需要你的代碼重構的公平位之後。我強調的重要位與評論：

// Register all events once, and once only. 
document.getElementById('sum').addEventListener("click", plus); 
document.getElementById('sub').addEventListener("click", minus); 
document.getElementById('eql').addEventListener('click', equal); 
document.getElementById('one').addEventListener("click", uno); 
document.getElementById('two').addEventListener("click", duo); 

// Get input element for display purposes. 
var screen = document.getElementById('hres'); 

// Variables to hold the numbers we are working with, and the operation symbol. 
var numI = 0; 
var numII = 0; 
var operation = null; 

// Simple functions to handle each number button. 
// You could use a data-* attribute and have a sinle generic function. 
function uno() { 
    setNumber(1); 
} 

function duo() { 
    setNumber(2); 
} 

// Function that processes any number provided. 
// The key here is to check if the user has click an operations button, 
// if so then we want to set the second variable. Otherwise set the first. 
function setNumber(n) { 
    screen.value = n; 
    if (operation) 
    numII = n; 
    else 
    numI = n; 
} 

// Basic functions to set the operation type. Again, data-* attribute would be useful. 
function plus() { 
    operation = '+'; 
} 

function minus() { 
    operation = '-'; 
} 

// Function to calculate result. 
// Here we check what the operation is and apply the correct logic to match. 
// Importantly, at the end, we assign the result to numI so it is ready for the next operation. 
function equal() { 
    var result = 'err'; 
    if (operation == '+') 
    result = numI + numII; 
    else if (operation == '-') 
    result = numI - numII; 
    numI = result; 
    screen.value = result; 
} 

Here is a working example.

---

注意：即使有這些變化他們是沒有用戶輸入任何驗證。它非常依賴用戶按正確順序按下按鈕（即編號>操作>編號>等於>操作/編號等）。如果你想進一步改進你的代碼，你應該考慮這個問題，儘管如此，我將它作爲這個問題的答案已經超出了範圍。