如何使我在计算器应用程序中按下的每个按钮都将数字组合在一起？答案

【问题标题】：How do I make it so each button I press in my calculator app combines the numbers together?如何使我在计算器应用程序中按下的每个按钮都将数字组合在一起？
【发布时间】：2020-01-21 00:01:06
【问题描述】：

我正在制作一个计算器应用程序作为我的第一个“真正的”编码项目。我知道网上有大量关于如何制作的教程，但我宁愿自己弄清楚如何将问题分解成更小的步骤。

话虽如此，我遇到了一个我自己似乎无法解决的问题。我按下的每个按钮都会将之前的值换成附加到该按钮的值。我正在努力了解如何对其进行编程，以便按下的每个按钮将两个值组合在一起。（例如“1”和“2”=“12”）

有什么想法吗？

谢谢！

https://codepen.io/tphelps5/pen/GRgBMMZ?editors=1010

JavaScript


let reset = document.getElementById("reset"),
    output = document.getElementById("output"),
    calcButtons = document.getElementById("calc_buttons");

calcButtons.addEventListener("click", printNum, false);

function printNum(e) {
  if (e.target !== e.currentTarget) {
    let clickedItem = e.target.value;
    output.innerHTML = clickedItem;
  }

  e.stopPropagation();
}

HTML

<HTML> 
  <h1> My First JavaScript Calculator </h2>
  <div id="calculator">

  <div id="calc_buttons">
    <span id="output"></span>

    <button class="operate" id="reset" value=" ">C</button>

    <button class="num" id="seven" value="7">7</button>
    <button class="num" id="eight" value="8">8</button>
    <button class="num" id="nine" value="9">9</button>

    <button class="operate" id="divide" value="/">/</button>


    <button class="num" id="four" value="4">4</button>
    <button class="num" id="five" value="5">5</button>
    <button class="num" id="six" value="6">6</button>

    <button class="operate" id="multiply" value="*">*</button>

    <button class="num" id="one" value="1">1</button>
    <button class="num" id="two" value="2">2</button>
    <button class="num" id="three" value="3">3</button>

    <button class="operate" id="minus" value="-">-</button>


    <button class="num" id="zero" value="0">0</button>

   <button class="operate" id="decimal" value=".">.</button>
   <button class="operate" id="equals" value="=">=</button>


   <button class="operate" id="plus" value="+">+</button>

</div>



</HTML>

【问题讨论】：

output.innerHTML = clickedItem 应该是 output.innerHTML += clickedItem

标签： javascript html css calculator

【解决方案1】：

线

output.innerHTML = clickedItem;

用 clickedItem 替换 outer 的内容。试试

output.innerHTML += clickedItem;

将其附加到内容中。

（是的，+ 附加字符串并添加数字。这只会偶尔导致非常混乱的错误。）

【讨论】：

【解决方案2】：

如何连接用户输入的数字

跟踪用户输入以连接数字很简单。

你需要做两件事：

跟踪输入的数字，在输入运算符时将其断开并存储在某处
跟踪输入的所有数字和运算符

let arr = []; // contains your list of numbers and operators in the order they were entered
let str = ""; // the current number string
function printNum(e) {
    ...// your own code logic
    if (e.target.value === "+" || e.target.value === "-" || ...) { // all the math operators here OR replace with regex matching
        // for OP: Add logic to handle accidentally pressing >1 operator in succession
        arr.push(str);
        str = "";
        arr.push(e.target.value)
    } else {
        str += e.target.value;
    }
}

你最终会得到一个如下所示的数组：

 arr = ["12","+","15","*", ...]

计算数组的值可能非常棘手，但会是一个很好的练习。

更完整的答案

我的主要目标是为您提供一个清晰而简单的解决方案，而不会在您的代码中添加太多内容。回答前请注意风险：

警告：从字符串执行 JavaScript 存在巨大的安全风险。当你使用 eval() 时，坏演员很容易运行任意代码。请参阅下面的从不使用 eval()!。

答案：

一种简单（且懒惰的方式）是维护一个跟踪用户输入并使用eval 进行实际计算的字符串。

这不考虑不正确的用户输入。例如。 1+2++3+5+

基本用法：

let str = "1+3+5";
let ans = eval(str); // ans is now "6"

从这里，您可以看到具有正确格式的数学运算符的字符串将 eval 到等式的最终结果。

如果您对这种方法感到满意，您可以这样做：

let str = ""
function printNum(e) {
    ...// your own code logic
    str += e.target.value;
}

如果您想自己解决问题的其余部分，我省略了完整的工作示例。如果您希望它作为参考，请参阅this pen。

【讨论】：

不错的答案，甚至可能不是 eval 的基本用例。不过，让初学者了解 eval 可能不是一个好主意。似乎是早期学习的东西，会经常使用：/
没错，这就是为什么警告出现在答案之前的原因：P
* 顺便说一句，我的意思是“甚至不是一个糟糕的用例”:)