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

我认为价值在几个地方都会丢失。您设置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); }中的行：

tests

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

（我创建了一个jsfiddle来定义一些单元测试。在javascript中向下滚动并在第142行查找TextBox5.Text = String.Join(", ", IO.File.ReadLines(TextBox13.Text))数组。可能有助于追踪一些错误。）

Answer 3

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

首先，请记住，您的操作数是字符串 表示数值，而不是实际的数值。这可以在您的add，subtract，multiply和divide函数中看到，这些函数始终对这两个参数执行parseFloat。但是，每个函数返回的值都是实际的数值。因此，在每种情况下，当您致电displayValue时，您都会传递号码。这意味着parseFloat中的displayValue电话是多余的。你所拥有的不是技术上的错误，但确实表明存在一些混乱。

同样，传递给handleNumberClick的值始终是一个数字。无需在该功能中调用parseFloat。无论如何，你都没有对解析后的结果做任何事情，所以这个电话实际上什么都不做。

handleNumberClick中的第一个陈述是问题的核心。你有：

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

如果operatorPressed为真，则currentOperand设置为一个数字（因为num是一个数字），这与您假设它是一个字符串不一致。这非常重要，因为+（和+=）的含义可以是数字加法或字符串连接，具体取决于参数。然后，如果operatorPressed为false，则currentOperand为字符串。但实际上，您正在更改currentOperand（由于=）和 displayNumbers.value（因为+=），这可能不是你的意图。通常，您只在+=之类的内容中使用x += ...，而不是在赋值语句的右侧。你可以做到，但这种情况非常罕见。

看看是否会让你失意。如果没有，请发表评论或更新，我会再看看。

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

HTML

的JavaScript

3 个答案: