在 JavaScript 中使用 onclick() 为数字添加小数部分

Question

我正在构建一个计算器，并尝试使用 onclick 方法在 JavaScript 中为数字添加小数。所以我有一个名为handleNumberClick 的函数，它将返回我单击的任何整数，然后还有另一个函数，理论上应该在数字函数的值上添加一个小数。

我使用了parseFloat 方法，认为这可以解决我的问题，但似乎并非如此。我的十进制函数是handleDecimalClick。

HTML

<div id="container">
    <div id="calculator">
        <div id="top-row">
            <button id="clear" onclick="clearMemory()" value="">
                C
            </button>
            <input id="display" type="number" maxlength="6">
            </input>
        </div>
        <div id="second-row">
            <button id="seven" onclick="handleNumberClick(7)" value="7" class="number">
                7
            </button>
            <button id="eight" onclick="handleNumberClick(8)" value="8" class="number">
                8
            </button>
            <button id="nine" onclick="handleNumberClick(9)" value="9" class="number">
                9
            </button>
            <button id="plus" onclick="handleOperationClick('add')" value="+" class="op">
                +
            </button>
        </div>
        <div id="third-row">
            <button id="four" onclick="handleNumberClick(4)" value="4" class="number">
                4
            </button>
            <button id="five" onclick="handleNumberClick(5)" value="5" class="number">
                5
            </button>
            <button id="six" onclick="handleNumberClick(6)" value="6" class="number">
                6
            </button>
            <button id="minus" onclick="handleOperationClick('subtract')" value="-" class="op">
                -
            </button>
        </div>
        <div id="fourth-row">
            <button id="one" onclick="handleNumberClick(1)" value="1" class="number">
                1
            </button>
            <button id="two" onclick="handleNumberClick(2)" value="2" class="number">
                2
            </button>
            <button id="three" onclick="handleNumberClick(3)" value="3" class="number">
                3
            </button>
            <button id="divide" onclick="handleOperationClick('division')" value="/" class="op">
                /
            </button>
        </div>
        <div id="fifth-row">
            <button id="zero" onclick="handleNumberClick(0)" value="0" class="number">
                0
            </button>
            <button id="decimal" onclick="handleDecimalClick()" value='.' class="number">
                .
            </button>
            <button id="equals" onclick="handleOperationClick('evaluate')" value="=" class="number">
                =
            </button>
            <button id="multiply" onclick="handleOperationClick('multiplication')" value="x" class="op">
                x
            </button>
        </div>
    </div>
</div>

JavaScript

var operatorPressed = false;
var prevOperand = 0;
var currentOperand = 0;
var operationRequested = '';
var decimalAdded = false;

// Creates calculator display input
var displayNumbers = document.getElementById("display");

// Clears calculator display and var a values
function clearMemory()  {
    displayNumbers.value = '';
    prevOperand = 0;
};

function clearDisplay() {
    displayNumbers.value = "";
};

// Displays values on calculator screen
var displayValue = function(num) {
    if (displayNumbers.value.length > 9) {
        displayNumbers.value = "ERROR";
    }
    else {
        displayNumbers.value = parseFloat(num);
    };
};

function handleNumberClick(num) {
    currentOperand = operatorPressed ? num : displayNumbers.value += num;
    operatorPressed = false;
    displayValue(currentOperand);
    console.log(num);
    parseFloat(num);
    console.log(prevOperand + 'prevOperand');
    console.log(currentOperand + 'currentOperand');
};

function handleDecimalClick() {
    currentOperand.value += '.';
    //console.log(displayNumbers.value);
}

function clearNumberEntered() {
    numberEntered='';
    clearDisplay();
}

// Operators functions
function handleOperationClick(operator) {
    var result;
    operatorPressed = true;
    switch(operationRequested){

        case 'add':
            result = add(prevOperand, currentOperand);
            break;

        case 'subtract':
            result = subtract(prevOperand, currentOperand);
            break;

        case 'multiplication':
            result = multiply(prevOperand, currentOperand);
            break;

        case 'division':
            result = divide(prevOperand, currentOperand);
            break;

        case 'evaluate':
            result = equate();
            break;

        default:
            result= '';
    }

    if (operationRequested) {  // If an acutal computation occurs, we'll
                               // store overwrite the result to the prevOperand
        displayValue(result.toFixed(2));
        prevOperand = result;
        operationRequested = '';
    }
    else { // If no computation occurs we'll just set the input val as the prevOperand
        prevOperand = currentOperand;
        operationRequested = '';
    }

    //console.log("operation:%s %d to %d", operationRequested, currentOperand, prevOperand );
    operationRequested = operator || operationRequested;
    console.log(operationRequested);
}

function add(num, adder) {
    var sum = parseFloat(num) + parseFloat(adder);
    return sum;
}

function subtract(num, subtracter) {
    var difference = parseFloat(num) - parseFloat(subtracter);
    console.log(difference);
    return difference;
}

function multiply(num, multiplier) {
    var product = parseFloat(num) * parseFloat(multiplier);
    return product;
}

function divide(num, divisor)    {
    var quotient = parseFloat(num) / parseFloat(divisor);
    return quotient;
}

function equate()    {
    return prevOperand;
    console.log(displayNumbers.value);
}

Answer 1

跟踪小数点的距离，然后用它来计算下一次按下按钮的 10 的幂。

var powerOfTen = -1;

当用户点击“.”按钮，将powerOfTen 设置为第一个值-1。

powerOfTen = -1;

然后，当按下数字按钮时，将其乘以 10 的 powerOfTen 的幂，然后将其添加到您已有的数字上。然后，将powerOfTen 减一。

number += digit * Math.pow(10, powerOfTen);
powerOfTen--;

Answer 2

我认为在几个地方失去了价值。 handleNumberClick 和 handleDecimalClick 中设置 currentOperand 值的行：

function handleNumberClick(num) {
    if(operatorPressed) {
      currentOperand = num;
    }
    else {
      currentOperand += num;
    }
    operatorPressed = false;
    displayValue(currentOperand);
    console.log(num);
    parseFloat(num);
    console.log(prevOperand + 'prevOperand');
    console.log(currentOperand + 'currentOperand');
}
function handleDecimalClick()   {
    currentOperand += '.';
    //console.log(displayNumbers.value);
}

我没有测试所有计算器功能来寻找其他问题，但这些更改似乎允许使用小数。

---

（我创建了一个 jsfiddle 定义了一些单元测试。在 javascript 中向下滚动并在第 142 行查找 tests 数组。可能有助于跟踪一些错误。）

Answer 3

这看起来可能是一个家庭作业问题，所以我将提供一些建议来帮助您解决问题。

首先，请记住，您的操作数是字符串，它们表示数值，而不是实际的数值。这可以在您的add、subtract、multiply 和divide 函数中看到，它们总是对两个参数执行parseFloat。但是，这些函数中的每一个返回的值都是一个实际的数值。因此，在每种情况下，当您调用displayValue 时，您都会传入一个数字。这意味着displayValue 中的parseFloat 调用是多余的。您所拥有的在技术上并没有错，但确实表明有些混乱。

同样，传递给handleNumberClick 的值始终是一个数字。无需在该函数中调用parseFloat。无论如何，您并没有对解析的结果做任何事情，因此该调用实际上什么都不做。

handleNumberClick 中的第一条语句是这里问题的核心。你有：

currentOperand = operatorPressed ? num : displayNumbers.value += num;

如果operatorPressed 为真，则currentOperand 设置为数字（因为num 是数字），这与您认为它是字符串的假设不一致。这非常重要，因为+（和+=）的含义可以是数字加法或字符串连接，具体取决于参数。那么，如果operatorPressed 为假，则currentOperand 是一个字符串。但事实上，您同时更改了currentOperand（因为=）和displayNumbers.value（因为+=），这可能不是你想要的。通常，您只在x += ... 之类的地方使用+=，而不是在赋值语句的右侧。你可以做到，但很少见。

看看这是否能让你摆脱困境。如果没有，请发表评论或更新，我再看看。