Question

我想向基本的Javascript计算器中添加功能，但是无法将小数点按钮附加到显示器上。

我可以在console.log上找到所需的产品，但是我无法获得小数点后再显示。如果我使用 printOutput（output）而不是 console.log（output），则什么也不会发生。没有错误或输出。

//GET TEXT VALUES FOR HISTORY AND OUTPUT
function getHistory() {
    return document.querySelector(".history-value").innerText;
}

function getOutput() {
    return document.querySelector(".output-value").innerText;
}

//PRINT HISTORY AND OUTPUT VALUES TO NUM VALUE
function printHistory(num) {
    document.querySelector(".history-value").innerText = num;
}

function printOutput(num) {
    if (num == "") {
        document.querySelector(".output-value").innerText = num;
    } else {
        document.querySelector(".output-value").innerText = getFormattedNumber(num);
    }
}

//NUMBER FORMATS
function getFormattedNumber(num) {
    if (num == "") {
        return "";
    }
    var n = Number(num);
    var value = n.toLocaleString("en");
    return value;
}

function reverseNumberFormat(num) {
    return Number(num.replace(/,/g, ''));
}

//OPERATOR AND NUMBER FUNCTIONS
var operator = document.getElementsByClassName("operator");
for (var i = 0; i < operator.length; i++) {
    operator[i].addEventListener('click', function () {

        if (this.id == "clear") {
            printHistory("");
            printOutput("");
        }
        else if (this.id == "backspace") {
            var output = reverseNumberFormat(getOutput()).toString();
            if (output) {
                output = output.substr(0, output.length - 1);
                printOutput(output);
            }
        }
        else {
            var output = getOutput();
            var history = getHistory();
            if (output == "" && history != "") {
                output = output == "" ?
                    output : reverseNumberFormat(output);
                if (isNaN(history[history.length - 1])) {
                    history = history.substr(0, history.length - 1);
                }
            }
            if (output != "" || history != "") {
                output = reverseNumberFormat(output);
                history = history + output;
                if (this.id == "=") {
                    var result = eval(history);
                    printOutput(result);
                    printHistory("");
                }
                else {
                    history = history + this.id;
                    printHistory(history);
                    printOutput("");
                }
            }
        }
    });
}

var number = document.getElementsByClassName("number");
for (var i = 0; i < number.length; i++) {
    number[i].addEventListener('click', function () {
        var output = reverseNumberFormat(getOutput());
        if (this.id == ".") {
            output += this.id;
            console.log(output);
        }
        else if (output != NaN) {
            output = output + this.id;
            printOutput(output);
        }
    });
}

printOutput("")

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
    <title>calcApp</title>
</head>

<body>
    <div class="container">
        <div class="calculator">
            <div class="results">
                <div class="history">
                    <p class="history-value"></p>
                </div>
                <div class="output">
                    <p class="output-value"></p>
                </div>
            </div>
            <div class="keyboard">
                <button class="operator" id="clear">C</button>
                <button class="operator" id="backspace">CE</button>
                <button class="operator" id="%">&#37;</button>
                <button class="operator" id="/">&#247;</button>
                <button class="number" id="7">7</button>
                <button class="number" id="8">8</button>
                <button class="number" id="9">9</button>
                <button class="operator" id="*">&times;</button>
                <button class="number" id="4">4</button>
                <button class="number" id="5">5</button>
                <button class="number" id="6">6</button>
                <button class="operator" id="-">-</button>
                <button class="number" id="1">1</button>
                <button class="number" id="2">2</button>
                <button class="number" id="3">3</button>
                <button class="operator" id="+">+</button>
                <button class="empty" id="empty"></button>
                <button class="number" id="0">0</button>
                <button class="number" id="." data-action="decimal">&#8226;</button>
                <button class="operator" id="=">=</button>
            </div>
        </div>
        </container>
        <script src="script.js"></script>
</body>

</html>

我尝试的特定代码是：

var number = document.getElementsByClassName("number");
for (var i = 0; i < number.length; i++) {
    number[i].addEventListener('click', function () {
        var output = reverseNumberFormat(getOutput());
        if (this.id == ".") {
            output += this.id;
            console.log(output);
        }
        else if (output != NaN) {
            output = output + this.id;
            printOutput(output);
        }
    });
}

简而言之：我想创建一个十进制按钮，该按钮将十进制添加到现有显示的数字中，然后允许使用十进制进行操作。我只是在显示问题上寻求帮助。

如何修复基本的JavaScript计算器不显示小数

0 个答案: