Question

好的，所以我正在尝试创建一个计算器。这是一个微不足道的问题，但我不确定我在这里做错了什么。我在网上到处寻找其他解决方案，但每个人都推荐我的方式。但是，它不起作用。

这是代码： HTML：

<!DOCTYPE html>
<html>
<head>
    <title>My Calculator</title>
    <link rel="stylesheet" href="mystyles.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <link rel="stylesheet" href="font-awesome-4.5.0/css/font-awesome.min.css">
    <link href='https://fonts.googleapis.com/css?family=Alegreya+Sans+SC:400,300' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Lato:400,300italic' rel='stylesheet' type='text/css'>
</head>
<body>
    <nav>
        <h1>Calculator Pro</h1>
    </nav>

    <div class="container">
        <div id="mainDiv">
            <div id="resultsDiv">
                <i class="fa fa-times"></i>
                <input type="text" id="resultsInput" readonly>
            </div>
            <div id="firstRow">
                <div class="numpad">
                    <p class="numOps seven">7</p>
                </div>
                <div class="numpad">
                    <p class="numOps eight">8</p>
                </div>
                <div class="numpad">
                    <p class="numOps nine">9</p>
                </div>
                <div class="numpad operatorDiv">
                    <p class="numOps divide">/</p>
                </div>
            </div>

            <div id="firstRow">
                <div class="numpad">
                    <p class="numOps four">4</p>
                </div>
                <div class="numpad">
                    <p class="numOps five">5</p>
                </div>
                <div class="numpad">
                    <p class="numOps six">6</p>
                </div>
                <div class="numpad operatorDiv">
                    <p class="numOps multiply">*</p>
                </div>
            </div>

            <div id="firstRow">
                <div class="numpad">
                    <p class="numOps one">1</p>
                </div>
                <div class="numpad">
                    <p class="numOps two">2</p>
                </div>
                <div class="numpad">
                    <p class="numOps three">3</p>
                </div>
                <div class="numpad operatorDiv">
                    <p class="numOps substract">-</p>
                </div>
            </div>

            <div id="firstRow">
                <div class="numpad">
                    <p class="numOps zero">0</p>
                </div>
                <div class="numpad">
                    <p class="numOps decimal">.</p>
                </div>
                <div class="numpad" id="equalSignDiv">
                    <p id="equalSign">=</p>
                </div>
                <div class="numpad operatorDiv">
                    <p class="numOps add">+</p>
                </div>
            </div>
    </div>

    <script type="text/javascript" src="myscripts.js"></script>
</body>
</html

jQuery的：

var temp_string = "";

$("#resultsInput").val("0");
//clears the results Div
$(".fa-times").click(function() {
  $("#resultsInput").val("0");
});


$(".numOps").click(function() {
  if ($("#resultsInput").val("0")) {
    $("#resultsInput").val($(this).text());
  } else {
    temp_string += $(this).text();
    $("#resultsInput").val($("#resultsInput").val() + $(this).text());
  }
});

我不确定我在这里做错了什么。提前谢谢你的帮助！

Answer 1

您以错误的方式使用3.8.4。

this

所以

$("#resultsInput").val($("#resultsInput").val() + $(this).text());
                                                      ^-- This points to input field and not .numOps

或者

$("#resultsInput").val($("#resultsInput").val() + temp_string);

Answer 2

错过结束</div>，在>关闭</html;将if ($("#resultsInput").val() === "0")替换为if ($("#resultsInput").val("0"));将$("#resultsInput").val(Number($("#resultsInput").val()) + Number($(this).text()));替换为$("#resultsInput").val($("#resultsInput").val() + $(this).text());

var temp_string = "";

$("#resultsInput").val("0");
//clears the results Div
$(".fa-times").click(function() {
  $("#resultsInput").val("0");
});

$(".numOps").click(function() {
  if ($("#resultsInput").val() === "0") {
    $("#resultsInput").val($(this).text());
  } else {
    temp_string += $(this).text();
    $("#resultsInput").val(Number($("#resultsInput").val()) + Number($(this).text()));
  }
});

<!DOCTYPE html>
<html>
<head>
    <title>My Calculator</title>
    <link rel="stylesheet" href="mystyles.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <link rel="stylesheet" href="font-awesome-4.5.0/css/font-awesome.min.css">
    <link href='https://fonts.googleapis.com/css?family=Alegreya+Sans+SC:400,300' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Lato:400,300italic' rel='stylesheet' type='text/css'>
</head>
<body>
    <nav>
        <h1>Calculator Pro</h1>
    </nav>

    <div class="container">
        <div id="mainDiv">
            <div id="resultsDiv">
                <i class="fa fa-times"></i>
                <input type="text" id="resultsInput" readonly>
            </div>
            <div id="firstRow">
                <div class="numpad">
                    <p class="numOps seven">7</p>
                </div>
                <div class="numpad">
                    <p class="numOps eight">8</p>
                </div>
                <div class="numpad">
                    <p class="numOps nine">9</p>
                </div>
                <div class="numpad operatorDiv">
                    <p class="numOps divide">/</p>
                </div>
            </div>

            <div id="firstRow">
                <div class="numpad">
                    <p class="numOps four">4</p>
                </div>
                <div class="numpad">
                    <p class="numOps five">5</p>
                </div>
                <div class="numpad">
                    <p class="numOps six">6</p>
                </div>
                <div class="numpad operatorDiv">
                    <p class="numOps multiply">*</p>
                </div>
            </div>

            <div id="firstRow">
                <div class="numpad">
                    <p class="numOps one">1</p>
                </div>
                <div class="numpad">
                    <p class="numOps two">2</p>
                </div>
                <div class="numpad">
                    <p class="numOps three">3</p>
                </div>
                <div class="numpad operatorDiv">
                    <p class="numOps substract">-</p>
                </div>
            </div>

            <div id="firstRow">
                <div class="numpad">
                    <p class="numOps zero">0</p>
                </div>
                <div class="numpad">
                    <p class="numOps decimal">.</p>
                </div>
                <div class="numpad" id="equalSignDiv">
                    <p id="equalSign">=</p>
                </div>
                <div class="numpad operatorDiv">
                    <p class="numOps add">+</p>
                </div>
            </div>
    </div>

</div>
</body>
</html>

Answer 3

你可以试试这个：

var temp_string = "";
var default_val = "0";

$("#resultsInput").val(default_val);

//clears the results Div

$(".fa-times").click(function() {
  $("#resultsInput").val(default_val);
});


$(".numOps").click(function() {

  temp_string += $this.text();

  $("#resultsInput").val(temp_string);

});

如何使用jquery将文本附加到输入值？

3 个答案: