Question

我是JavaScript及其功能的新手。我目前正在尝试制作一个基本的计算器来尝试一些技巧，并遇到了一个问题。当我尝试输入一个两位数时，它将两个数字加在一起，例如：我输入12 + 5，我得到的答案是8.它将两位数加在一起，无法弄清楚如何修复它。谢谢，我愿意接受任何建议:) PS：很抱歉 `

            </div>
                    <button type="button" onclick="putToScreen(1); xValue += parseInt(1)" class="inputButton1 input" value="1">1</button>
                    <button type="button" onclick="putToScreen(2); xValue += parseInt(2)" class="inputButton1 input" value="2">2</button>
                    <button type="button" onclick="putToScreen(3); xValue += parseInt(3)" class="inputButton1 input" value="3">3</button>
                    <button type="button" onclick="putToScreen('+'); plusButton++" class="inputButton1" value="+">+</button>
                    <button type="button" onclick="putToScreen(4); xValue += parseInt(4)" class="inputButton2 input" value="4">4</button>
                    <button type="button" onclick="putToScreen(5); xValue += parseInt(5)" class="inputButton2 input" value="5">5</button>
                    <button type="button" onclick="putToScreen(6); xValue += parseInt(6)" class="inputButton2 input" value="6">6</button>
                    <button type="button" onclick="putToScreen('-')" class="inputButton2" value="-">-</button>
                    <button type="button" onclick="putToScreen(7); xValue += parseInt(7)" class="inputButton3 input" value="7">7</button>
                    <button type="button" onclick="putToScreen(8); xValue += parseInt(8)" class="inputButton3 input" value="8">8</button>
                    <button type="button" onclick="putToScreen(9); xValue += parseInt(9)" class="inputButton3 input" value="9">9</button>
                    <button type="button" onclick="putToScreen('*')" class="inputButton3" value="*">*</button>
                    <button type="button" onclick="clearScreen()" class="inputButton" value="C">C</button>
                    <button type="button" onclick="putToScreen(0); xValue += parseInt(0)" class="inputButton4 input" value="0">0</button>
                    <button type="button" class="inputButton4" onclick="compute()" value="=">=</button>
                    <button type="button" onclick="putToScreen('/')" class="inputButton4" value="/">/</button>
        </div>
    </div>
    <script type="text/javascript">
        var input = document.getElementsByClassName("inputButton");
        //var valueBox = document.getElementById("answer");
        var answer = document.getElementById("answer");

        // var xValue = do i +=
        var xValue = 0;
        var yValue = 0;
        var plusButton = 0;
        //var finalAnswer

        function putToScreen (x) {
            var node = document.createTextNode(x);
            answer.appendChild(node);
        }

        function clearScreen() {
            answer.innerHTML = "";
            xValue = 0;
            yValue = 0;
            plusButton = 0;
        }

        function add () {
            if (plusButton >= 1) {
                document.getElementsByClassName("input").onclick = "yValue +=";
            }
            var sum = parseInt(xValue) + parseInt(yValue);
            answer.innerHTML = sum;
        }

        //var sum = parseInt(xValue) + parseInt(yValue);

        function compute () {
            if(plusButton >= 1) {
                add();
            }
        }

`

Answer 1

<强>更新

@Ryan打电话给我推荐eval的任务 - 这是有充分理由的。我不同意eval总是邪恶的，我认为认为在这种情况下适合使用，因为输入仅限于按下按钮。但我应该指出eval应始终谨慎使用。

请参阅Calculate string value in javascript, not using eval，了解其他支持使用eval解决此类问题的论据。

但@yckart提出了一个很好的选择，所以这是我的新建议。

将计算功能更改为：

function compute () {
  answer.innerHTML = new Function('return ' + answer.innerHTML)();
}

然后，您可以删除执行计算的所有逻辑。（否则，您需要编写一个递归下降解析器，这是主要任务。）

要回答您的问题，＆＃34;它是否适用于平方根和正方形等内容？＆＃34; ： eval和Function方法适用于任何有效的JavaScript表达式：

Math.sqrt(number)返回数字的平方根。
Math.pow(number, 2)正方形的数字。

<强>段

＆＃13;

function putToScreen (x) {
  var node = document.createTextNode(x);
  answer.appendChild(node);
}

function clearScreen() {
  answer.innerHTML = '';
}

function compute () {
  answer.innerHTML = new Function('return ' + answer.innerHTML)();
}

＆＃13;

button {
  width: 2em;
}

＆＃13;

<div id="answer"></div>
<hr>
<button onclick="putToScreen(this.innerText)" >1</button>
<button onclick="putToScreen(this.innerText)" >2</button>
<button onclick="putToScreen(this.innerText)" >3</button>
<button onclick="putToScreen(this.innerText)" >+</button><br>
<button onclick="putToScreen(this.innerText)" >4</button>
<button onclick="putToScreen(this.innerText)" >5</button>
<button onclick="putToScreen(this.innerText)" >6</button>
<button onclick="putToScreen(this.innerText)" >-</button><br>
<button onclick="putToScreen(this.innerText)" >7</button>
<button onclick="putToScreen(this.innerText)" >8</button>
<button onclick="putToScreen(this.innerText)" >9</button>
<button onclick="putToScreen(this.innerText)" >*</button><br>
<button onclick="clearScreen(this.innerText)" >C</button>
<button onclick="putToScreen(this.innerText)" >0</button>
<button onclick="compute()"                   >=</button>
<button onclick="putToScreen(this.innerText)" >/</button>

＆＃13;

Answer 2

原因是你按下的每个按钮分别增加了属于按钮的相应数字的xvalue和yvalue。因此，如果您输入12，则首先将xvalue增加1，然后增加2.

请注意

xValue+=n

将x值增加n。你可以像这样写

xValue=xValue+ n

哪种光更为熟悉。

Answer 3

您应该将用户输入作为字符串处理，直到按下+， - ，*或/。这意味着你不要将数字作为数字添加到xValue中，而是作为字符串添加。例如，按1即可使用

xValue+= "1"

如果你输入12，你就得到了

xValue = "12"

如果用户现在按下其中一个按钮，您就知道此号码已完成，您可以使用parseInt（）将其转换为数字。

将两位数变量加在一起

3 个答案: