我该怎么做才能让我在计算器应用程序中按下的每个按钮都将数字组合在一起？

Question

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

话虽如此，我遇到了一个我自己似乎无法解决的问题。 我按下的每个按钮都会将之前的值换成附加到该按钮的值。 我正在努力了解如何对其进行编程，以便按下的每个按钮都将这两个值组合在一起。 （例如“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>

Answer 1

如何连接用户输入的数字

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

你需要做两件事：

跟踪输入的数字，将其拆分并在输入操作员时将其存储在某处
跟踪输入的所有数字和运算符

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

如果您想自己解决其余问题，我省略了完整的工作示例。 如果您想参考它，请参阅这支笔。

Answer 2

线

output.innerHTML = clickedItem;

用 clickedItem 替换outer的内容。 尝试

output.innerHTML += clickedItem;

它将它附加到内容中。

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

我该怎么做才能让我在计算器应用程序中按下的每个按钮都将数字组合在一起？

问题描述

2 个解决方案

解决方案1
0 2020-01-21 01:52:05

如何连接用户输入的数字

更完整的答案

回答：

解决方案2
0 2020-01-21 02:27:46

我该怎么做才能让我在计算器应用程序中按下的每个按钮都将数字组合在一起？

问题描述

2 个解决方案

解决方案1 0 2020-01-21 01:52:05

如何连接用户输入的数字

更完整的答案

回答：

解决方案2 0 2020-01-21 02:27:46

解决方案1
0 2020-01-21 01:52:05

解决方案2
0 2020-01-21 02:27:46