[英]How can I append the value of an input text into a variable with jQuery?
[英]How to append text to input value using jquery?
好的,所以我试图创建一个计算器。 这是一个微不足道的问题,但是我不确定我在做什么错。 我在网上到处寻找其他解决方案,但每个人都推荐我做的方法。 但是,它不起作用。
下面是代码: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());
}
});
我不确定我在做什么错。 提前谢谢你的帮助!
您正在使用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});
缺少</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>
您可以尝试以下方法:
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.