JS中構建計算器的問題

Question

我是一個完整的初學者，已經開始通過免費代碼陣營學習JavaScript。我正在嘗試編寫一個程序來製作一個使用基本JavaScript的計算器。我的計算器似乎工作正常，除了它有幾個問題，我想解決。編輯，以澄清我在這裏尋求幫助。請使用以下操作在下面的代碼段中運行我的代碼，然後您就會明白我在問什麼。鍵入9-2然後點擊'='計算器應該顯示'7'。如果您在顯示'7'後立即鍵入'2'，它會在屏幕上顯示'72'，這是我不想要的。我希望它重置爲空白屏幕。我的另一個問題是運營商的重複顯示。我使用了其他評論者提供的代碼，但他們似乎沒有工作。我會繼續尋找解決方案。謝謝你們。

1. 運營商：+，-，*，/和.在這個時候可以重複按下按鈕時重複。如何創建一個只允許顯示一次的功能。
2. 點擊屏幕上顯示結果的'平等'按鈕。如果我按下另一個數字，它會添加到結果上，而不是在新屏幕上開始。我需要它重置並使用我現有的代碼開始一個新的。 任何指導和方向表示讚賞。我現在搜索Google已有好幾天了，但仍然停滯不前。我在邏輯上也很糟糕，我正在盡全力把這件事包括在內。謝謝。

var show = document.getElementById('display'); 
 
var reset = false; 
 

 
function clear() { 
 
    if (reset) { 
 
    show.value = ''; 
 
    reset = false; 
 
    } 
 
} 
 

 
function toScreen(x) { 
 
    clear(); 
 
    show.value += x; 
 
    if (x === 'c') { 
 
    show.value = ''; 
 
    } 
 
} 
 

 
function answer() { 
 
    x = show.value; 
 
    x = eval(x); 
 
    show.value = x; 
 
    reset = false; 
 
} 
 

 
function power() { 
 
    x = show.value; 
 
    x = eval(x * x); 
 
    show.value = x; 
 
} 
 

 
function backspace() { 
 
    var num = show.value; 
 
    var len = num.length - 1; 
 
    var newNum = num.substring(0, len); 
 
    show.value = newNum; 
 
} 
 

 
function percent() { 
 
    x = show.value; 
 
    x = eval(x/100); 
 
    show.value = x; 
 
} 
 

 
function opposite() { 
 
    var n = show.value; 
 
    n = n * -1; 
 
    show.value = n; 
 
} 
 

 
function sqrt() { 
 
    var number = show.value; 
 
    var ans = Math.sqrt(number); 
 
    if (number < 0) 
 
    ans = "Try a positive number!"; 
 
    show.value = ans; 
 
} 
 

 
function pie() { 
 
    var pi = show.value; 
 
    var result = Math.PI; 
 
    show.value = result; 
 
}

<form> 
 
    <input type="text" id="display" disabled><br> 
 

 
    <input type="button" value="C" id="keys" onclick="toScreen('c')"> 
 
    <input type="button" value="DEL" id="keys" onclick="backspace()"> 
 
    <input type="button" value="π" id="keys" onclick="pie()"> 
 
    <input type="button" value="+/-" id="keys" onclick="opposite()"><br> 
 

 
    <input type="button" value="√" id="keys" onclick="sqrt()"> 
 
    <input type="button" value="%" id="keys" onclick="percent()"> 
 
    <input type="button" value="x^2" id="keys" onclick="power()"> 
 
    <input type="button" value="+" id="keys" onclick="toScreen('+')"><br> 
 

 
    <input type="button" value="9" id="keys" onclick="toScreen('9')"> 
 
    <input type="button" value="8" id="keys" onclick="toScreen('8')"> 
 
    <input type="button" value="7" id="keys" onclick="toScreen('7')"> 
 
    <input type="button" value="-" id="keys" onclick="toScreen('-')"><br> 
 

 
    <input type="button" value="6" id="keys" onclick="toScreen('6')"> 
 
    <input type="button" value="5" id="keys" onclick="toScreen('5')"> 
 
    <input type="button" value="4" id="keys" onclick="toScreen('4')"> 
 
    <input type="button" value="*" id="keys" onclick="toScreen('*')"><br> 
 

 
    <input type="button" value="3" id="keys" onclick="toScreen('3')"> 
 
    <input type="button" value="2" id="keys" onclick="toScreen('2')"> 
 
    <input type="button" value="1" id="keys" onclick="toScreen('1')"> 
 
    <input type="button" value="/" id="keys" onclick="toScreen('/')"><br> 
 

 
    <input type="button" value="0" id="keys" onclick="toScreen('0')"> 
 
    <input type="button" value="." id="keys" onclick="toScreen('.')"> 
 
    <input type="button" value="=" id="equal" onclick="answer()"><br> 
 
</form>

Answer 1

function answer() { 
    x = show.value; 
    x = eval(x); 
    show.value = x; 
    reset = true; 
} 

更改重置爲true，這樣它清除show.value是一個空字符串，就解決了NR 2爲您

Answer 2

見代碼

這是完美的工作代碼。你可以用我替換x一些地方，如：

function power() { 
    x = eval(i * i); 
    show.value = x; 
    reset = true; 
} 

問題修正：

1. 你的第一個&第二個問題

2. 您的代碼沒有檢查輸入從NUM開始。或操作員（/ 1 * 1）

3. 您的代碼沒有檢查無效的輸入（1 + 1 + 1 +等）

4. 您的代碼也不清楚屏幕（如在雁的情況下， ）後功率Pi等

5. 你之類的函數PI電源不檢查輸入是一個數字的（功率8 *）看到電源功能：

var show = document.getElementById('display'); 
 
var reset = false; 
 
var i = ""; //store what is typed 
 

 
function clear() { 
 
    if (reset) { 
 
    i = ''; 
 
    show.value = i; 
 
    reset = false; 
 
    } 
 
} 
 

 
function toScreen(x) { 
 
    clear(); 
 
    if (x === "+" || x === "-" || x === "*" || x === "/" || x === ".") { 
 
    if (i.charAt(i.length - 1) === x) { 
 
     return false; 
 
    } 
 
    if (i.length === 0) { 
 
     return false; 
 
    } 
 
    } 
 
    i += x; 
 
    if (x === 'c') { 
 
    i = ''; 
 
    } 
 
    show.value = i; 
 
} 
 

 
function answer() { 
 
    var op = ["+", "-", "*", ".", "/"]; 
 
    for (a=0; a<op.length; a++) { 
 
    if (i.charAt(i.length - 1) === op[a]) { 
 
     alert("Wrong input"); 
 
     return false; 
 
    } 
 
    } 
 
    x = show.value; 
 
    x = eval(x); 
 
    show.value = x; 
 
    reset = true; 
 
} 
 

 
function power() { 
 
    if (isNaN(i)) { 
 
    alert("please enter a valid number"); 
 
    return false; 
 
    } 
 
    x = show.value; 
 
    x = eval(x * x); 
 
    show.value = x; 
 
    reset = true; 
 
} 
 

 
function backspace() { 
 
    var num = show.value; 
 
    var len = num.length - 1; 
 
    var newNum = num.substring(0, len); 
 
    show.value = newNum; 
 
    reset = true; 
 
} 
 

 
function percent() { 
 
    x = show.value; 
 
    x = eval(x/100); 
 
    show.value = x; 
 
    reset = true; 
 
} 
 

 
function opposite() { 
 
    var n = show.value; 
 
    n = n * -1; 
 
    show.value = n; 
 
    reset = true; 
 
} 
 

 
function sqrt() { 
 
    var number = show.value; 
 
    var ans = Math.sqrt(number); 
 
    if (number < 0) 
 
    ans = "Try a positive number!"; 
 
    show.value = ans; 
 
    reset = true; 
 
} 
 

 
function pie() { 
 
    var pi = show.value; 
 
    var result = Math.PI; 
 
    show.value = result; 
 
    reset = true; 
 
}

<form> 
 
    <input type="text" id="display" disabled><br> 
 

 
    <input type="button" value="C" id="keys" onclick="toScreen('c')"> 
 
    <input type="button" value="DEL" id="keys" onclick="backspace()"> 
 
    <input type="button" value="π" id="keys" onclick="pie()"> 
 
    <input type="button" value="+/-" id="keys" onclick="opposite()"><br> 
 

 
    <input type="button" value="√" id="keys" onclick="sqrt()"> 
 
    <input type="button" value="%" id="keys" onclick="percent()"> 
 
    <input type="button" value="x^2" id="keys" onclick="power()"> 
 
    <input type="button" value="+" id="keys" onclick="toScreen('+')"><br> 
 

 
    <input type="button" value="9" id="keys" onclick="toScreen('9')"> 
 
    <input type="button" value="8" id="keys" onclick="toScreen('8')"> 
 
    <input type="button" value="7" id="keys" onclick="toScreen('7')"> 
 
    <input type="button" value="-" id="keys" onclick="toScreen('-')"><br> 
 

 
    <input type="button" value="6" id="keys" onclick="toScreen('6')"> 
 
    <input type="button" value="5" id="keys" onclick="toScreen('5')"> 
 
    <input type="button" value="4" id="keys" onclick="toScreen('4')"> 
 
    <input type="button" value="*" id="keys" onclick="toScreen('*')"><br> 
 

 
    <input type="button" value="3" id="keys" onclick="toScreen('3')"> 
 
    <input type="button" value="2" id="keys" onclick="toScreen('2')"> 
 
    <input type="button" value="1" id="keys" onclick="toScreen('1')"> 
 
    <input type="button" value="/" id="keys" onclick="toScreen('/')"><br> 
 

 
    <input type="button" value="0" id="keys" onclick="toScreen('0')"> 
 
    <input type="button" value="." id="keys" onclick="toScreen('.')"> 
 
    <input type="button" value="=" id="equal" onclick="answer()"><br> 
 
</form>

Answer 3

1. 編輯您的toScreen()功能，只會增加您的operator如果它 沒有以前鍵入：

function toScreen(x) { 
    clear(); 
    var notTwice = ['+', '-', '*', '/', '.']; //List of chars that should not be repeated 
    if(notTwice.indexOf(x) > -1){ 
    if(show.value.slice(-1) != x){ //Only type it if it wasn't typed right before 
     show.value += x; 
    } 
    } 
    else{ 
    show.value += x; 
    } 
    if (x === 'c') { 
    show.value = ''; 
    } 
} 

剛在您的answer()函數中設置reset至false。

這是給你一個工作片斷：

var show = document.getElementById('display'); 
 
var reset = false; 
 
var i = ""; //store what is typed 
 

 
function clear() { 
 
    if (reset) { 
 
    i = ''; 
 
    show.value = i; 
 
    reset = false; 
 
    } 
 
} 
 

 
function toScreen(x) { 
 
    clear(); 
 
    var notTwice = ['+', '-', '*', '/', '.']; //List of chars that should not be repeated 
 
    if(notTwice.indexOf(x) > -1){ 
 
    if(show.value.slice(-1) != x){ //Only type it if it wasn't typed right before 
 
     show.value += x; 
 
    } 
 
    } 
 
    else{ 
 
    show.value += x; 
 
    } 
 
    if (x === 'c') { 
 
    show.value = ''; 
 
    } 
 
} 
 

 
function answer() { 
 
    var op = ["+", "-", "*", ".", "/"]; 
 
    for (a=0; a<op.length; a++) { 
 
    if (i.charAt(i.length - 1) === op[a]) { 
 
     alert("Wrong input"); 
 
     return false; 
 
    } 
 
    } 
 
    x = show.value; 
 
    x = eval(x); 
 
    show.value = x; 
 
    reset = false; 
 
} 
 

 
function power() { 
 
    if (isNaN(i)) { 
 
    alert("please enter a valid number"); 
 
    return false; 
 
    } 
 
    x = show.value; 
 
    x = eval(x * x); 
 
    show.value = x; 
 
    reset = true; 
 
} 
 

 
function backspace() { 
 
    var num = show.value; 
 
    var len = num.length - 1; 
 
    var newNum = num.substring(0, len); 
 
    show.value = newNum; 
 
    reset = true; 
 
} 
 

 
function percent() { 
 
    x = show.value; 
 
    x = eval(x/100); 
 
    show.value = x; 
 
    reset = true; 
 
} 
 

 
function opposite() { 
 
    var n = show.value; 
 
    n = n * -1; 
 
    show.value = n; 
 
    reset = true; 
 
} 
 

 
function sqrt() { 
 
    var number = show.value; 
 
    var ans = Math.sqrt(number); 
 
    if (number < 0) 
 
    ans = "Try a positive number!"; 
 
    show.value = ans; 
 
    reset = true; 
 
} 
 

 
function pie() { 
 
    var pi = show.value; 
 
    var result = Math.PI; 
 
    show.value = result; 
 
    reset = true; 
 
}

<form> 
 
    <input type="text" id="display" disabled><br> 
 

 
    <input type="button" value="C" id="keys" onclick="toScreen('c')"> 
 
    <input type="button" value="DEL" id="keys" onclick="backspace()"> 
 
    <input type="button" value="π" id="keys" onclick="pie()"> 
 
    <input type="button" value="+/-" id="keys" onclick="opposite()"><br> 
 

 
    <input type="button" value="√" id="keys" onclick="sqrt()"> 
 
    <input type="button" value="%" id="keys" onclick="percent()"> 
 
    <input type="button" value="x^2" id="keys" onclick="power()"> 
 
    <input type="button" value="+" id="keys" onclick="toScreen('+')"><br> 
 

 
    <input type="button" value="9" id="keys" onclick="toScreen('9')"> 
 
    <input type="button" value="8" id="keys" onclick="toScreen('8')"> 
 
    <input type="button" value="7" id="keys" onclick="toScreen('7')"> 
 
    <input type="button" value="-" id="keys" onclick="toScreen('-')"><br> 
 

 
    <input type="button" value="6" id="keys" onclick="toScreen('6')"> 
 
    <input type="button" value="5" id="keys" onclick="toScreen('5')"> 
 
    <input type="button" value="4" id="keys" onclick="toScreen('4')"> 
 
    <input type="button" value="*" id="keys" onclick="toScreen('*')"><br> 
 

 
    <input type="button" value="3" id="keys" onclick="toScreen('3')"> 
 
    <input type="button" value="2" id="keys" onclick="toScreen('2')"> 
 
    <input type="button" value="1" id="keys" onclick="toScreen('1')"> 
 
    <input type="button" value="/" id="keys" onclick="toScreen('/')"><br> 
 

 
    <input type="button" value="0" id="keys" onclick="toScreen('0')"> 
 
    <input type="button" value="." id="keys" onclick="toScreen('.')"> 
 
    <input type="button" value="=" id="equal" onclick="answer()"><br> 
 
</form>