javascript - 在 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--;