JavaScript 中的 .text 问题

我正在努力创建一个简单的计算器。我被困在显示问题上。我有按钮类中的所有按钮。当我尝试显示任何内容时，例如 $（".display"）.text（output）;它不起作用。我有一个要选择的显示类，它位于可以包含文本的标签下，输出是一个等于某物的变量。我尝试与我拥有的其他一些代码进行比较，这些代码涉及使用变量更改文本，但我看不出问题是什么。

.HTML：

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" type="text/css" href="resources/styles.css">
         <link href='https://fonts.googleapis.com/css?family=Lato:400,300,100,300italic' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <div class="calculator-background row">
            <p class="calc-title">Free Code Camp Calculator</p>
            <div class="row answer-box"><p class="display"></p></div>
            <div class="row">
                <button type="button">AC</button>
                <button type="button">CE</button>
                <button type="button">%</button>
                <button type="button">/</button>
            </div>
            <div class="row">
                <button type="button">7</button>
                <button type="button">8</button>
                <button type="button">9</button>
                <button type="button">*</button>
            </div>
            <div class="row">
                <button type="button">4</button>
                <button type="button">5</button>
                <button type="button">6</button>
                <button type="button">-</button>
            </div>
            <div class="row">
                <button type="button">1</button>
                <button type="button">2</button>
                <button type="button">3</button>
                <button type="button">+</button>
            </div>
            <div class="row">
                <button type="button">.</button>
                <button type="button">0</button>
                <button type="button">Ans</button>
                <button type="button">=</button>
            </div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        <script src="resources/calculator.js"></script>
    </body>
</html>

JavaScript：

$(document).ready(function(){
    var output = "";
    /* Calculator buttons */
    // only buttons are calculator buttons
    $("button").click(function(){
        // gets the text label of the button?
        var input = $(this).text();
        // if, else if chain for calculator functions
        if(input !== "AC" && input !== "CE" && input !== "Ans" && input !== "=")
            {
                output += input;
            }
        else if(input === "=")
            {
                output = eval(output);
            }
        else if(input === "CE" && output.length > 0)
            {
                output = output.slice(0,-1);
            }
        else if(input === "AC" && output.length > 0)
            {
                output = "";
            }
        else if(input === "Ans")
            {
                output = output;
            }
        // test to see if output wasn't getting anything
        output = 5;
        // display result in display class, doesn't display anything
        $(".display").text(output);
    });  
});

问题是文本的颜色是白色的

将其添加到您的 CSS 中

.display {
    color: #000000;
}

这是更新的小提琴： https://jsfiddle.net/2fyftj7a/1/

> <p class='display'></p>继承的字体颜色是白色，因此您看不到它。

将此添加到您的.display类...

color: #000;

我认为您仍然有一个问题，您需要检查：

output.length

您可能需要将其更改为：

output.toString().length

相关内容

最新更新

热门标签：