堆棧內存溢出
  簡體   English   中英

如何使用jQuery將文本附加到輸入值？

[英]How to append text to input value using jquery?

 原文  2015-12-20 08:42:33  7   3    javascript/ jquery/ html

問題描述

好的，所以我試圖創建一個計算器。 這是一個微不足道的問題，但是我不確定我在做什么錯。 我在網上到處尋找其他解決方案，但每個人都推薦我做的方法。 但是，它不起作用。

下面是代碼：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());
  }
});

我不確定我在做什么錯。 提前謝謝你的幫助！

3 個解決方案

解決方案1
 0  2015-12-20 08:46:39

您正在使用this錯誤的方式。 

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

也是 

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

要么 

$("#resultsInput").val(function(){$(this).val() + temp_string});

解決方案2
 0  2015-12-20 08:53:20

缺少</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>

解決方案3
 0  2015-12-20 09:07:36

您可以嘗試以下方法： 

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);

});

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何使用jQuery將輸入文本的值附加到變量中？ jQuery通過Onblur輸入值動態附加文本 如何使用jquery專注於帶有值的輸入文本？ 如何使用jQuery設置輸入文本的值 如何使用Jquery獲取輸入文本值 jQuery：將文本追加到輸入中 使用jQuery將值附加到輸入字段 使用jQuery將文本字段值附加到URL 如何將前綴和后綴附加到輸入值 Jquery 將輸入文字附加到輸入值
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM