Question

这个让我挠头。

我使用JavaScript作为练习构建计算器。所述计算器已启动并运行here on Codepen。在左下角，你会看到一个＆＃34; + - ＆＃34;按钮，它只是取输入字段的内容，并反转它的符号（正变为负，负变为正。）然后，当用户按下操作按钮时，将其拉出并用于计算。简单吧？

实际更改符号的功能如下：

function toggleSign() {
    if(getCurrentDispVal()[0] === "-") {
        currentNumStr = currentNumStr.slice(1, currentNumStr.length);
    } else {
        currentNumStr = "-" + currentNumStr;
    }
    updateDisplay(currentNumStr);
}

并且只在一个地方调用，这个函数从用户那里获取输入并决定如何处理它：

function useInput(input) {
    if(input.match(/(\d|\.)/)) {
        handleDigitInput(input);
    } else if(input.match(/(X|\/|-|\+)/)) {
        handleBinaryOperation(input);
    } else if(input.match(/=/)) {
        handleEqualsOperation();
    } else if(input.match(/^c$/)) {
        clearCurrentNumStr();
    } else if(input.match(/^ac$/)) {
        allClear();
    } else if(input.match(/^shorten$/)) {
        shortenCurrentNumStr(); 
    } else if(input.match(/^plusmin$/)) {
        toggleSign();
    }
}

现在有时候，有时只会按预期工作。例如，输入以下内容： 1在键盘上，而不是屏幕上点击＆＃34; + - ＆＃34;按键 +在键盘上 5键盘上在键盘上输入

有时候这种方式运行正常，然后吐出来＃4;＆＃34;作为结果。有时，这令我感到困惑，当你点击进入时，它会翻转标志＆＃34; 5＆＃34;制作它＆＃34; -5＆＃34;然后返回＆＃34; -6＆＃34;作为答案。＆＃34;我做了一些检查，可以看到发生这种情况时，在useInput函数中，触发了/ = /和/ ^ plusmin $ / conditionals。因此，在handleEqualsOperation之前调用toggleSign，这就是结果。奇怪的是，如果你不使用键盘，只是直接点击屏幕按钮，这个问题就不会发生。

我在这里不知所措。似乎没有任何关于何时发生这种情况的模式，并且我一遍又一遍使用相同的输入。我不明白为什么会这样，以及为什么它不会一直发生。

Answer 1

因此，对于我所看到的，您处理＆＃34; currentNumStr＆＃34;的方式存在问题。变量，按照这个例子，找到另一个问题：

按5
按+/-按钮切换标志
按下X按钮
按6

＆＃34;它将显示-30＆＃34;，但由于您进行了操作（handleBinaryOperation，handleEqualsOperation）＆＃34; currentNumStr＆＃34;将是空的＆＃34;
按+/-按钮切换标志
你会得到一个空的显示

如果您跟踪此变量，您将得到答案。

另请注意，e.key不是跨浏览器兼容的，也许您可以使用e.keyCode或e.which，因此我收到了许多未定义的错误。

编辑：举例说明我在评论中添加的内容：

HTML中的

改变了这个：

<div class="calc-body>

到这个，选择你想要的id（tabindex是必要的，所以div不能得到焦点）

<div class="calc-body" id="forFocusId" tabindex="0">

并在Js文件中添加一个全局var以指定div（如果您不想添加变量，则可以在下一步调用document.getElementById("forFocusId")）

var focusElement = document.getElementById("forFocusId");

最后在函数useInput的末尾添加

focusElement.focus();

JS程序采取不必要的输入，但只偶尔

1 个答案: