在JavaScript中使用onclick（）向数字添加小数部分

Question

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

我使用了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中的行， handleNumberClick设置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为true，则将currentOperand设置为一个数字（因为num是一个数字），这与您假设它是字符串不一致。 这非常重要，因为+ （和+= ）的含义可以是数字加法或字符串连接，具体取决于参数。 然后，如果operatorPressed为false，则currentOperand为字符串。 但是实际上，您正在同时更改currentOperand （由于= ） 和 displayNumbers.value （由于+= ），这可能不是您想要的。 通常，仅在x += ...类的内容中使用+= ，而不是在赋值语句的右侧使用。 您可以做到，但这很少见。

看看是否让您感到困惑。 如果没有，发表评论或更新，我会再看一遍。