在 JS 中构建计算器的问题

Question

我是这方面的完全初学者，并已开始通过免费代码营学习 javascript。 我正在尝试编写一个程序来使用基本的 javascript 制作计算器。 我的计算器似乎工作正常，只是它有几个我想解决的问题。 编辑以澄清我在这里寻求帮助的内容。 请使用以下操作在下面的代码段中运行我的代码，你就会明白我在问什么。 输入 9-2 然后点击“=”计算器应该显示“7”。 如果在显示“7”后立即键入“2”，它会在屏幕上显示“72”，这是我不希望它做的。 我希望它重置为空白屏幕。 我遇到的另一个问题是操作符的重复显示。 我使用了其他评论者提供的代码，但它们似乎不起作用。 我会继续寻找解决方案。 谢谢你们。

1. 运算符： + 、 - 、 * 、 /和. 此时可重复按下按钮时重复。 如何创建一个只允许显示一次的函数。
2. 点击“相等”按钮后，结果显示在屏幕上。 如果我按下另一个数字，它会添加到结果中，而不是在新屏幕上开始。 我需要它重置并使用我当前的代码开始一个新的。 任何指导和方向表示赞赏。 我已经搜索谷歌好几天了，但仍然卡住了。 我在逻辑上也很糟糕，我正在尽力解决这个问题。 谢谢。

 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

查看代码

这是完美的工作代码。 您可以将 x 替换为 i 一些地方，例如：

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

问题修复：

1. 你的第一和第二个问题

2. 您的代码没有检查是从数字开始的输入。 或运算符 (/1, *1)

3. 您的代码未检查无效输入（1+、1+1+ 等）

4. 在电源 Pi 等之后，您的代码也无法清除屏幕（例如在分析仪的情况下）

5. 您的函数如 PI Power 不检查输入是否为数字（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 2

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

将重置更改为 true，以便将 show.value 清除为空字符串，从而为您解决 nr.2

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 = '';
  }
}

2. 只需在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>