问题描述
<html>
<head>
<title>Expense Tracker</title>
<style type="text/css">
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button
{
-webkit-appearance: none;
margin: 0;
}
table
{
display: none;
}
td,th
{
text-align: center;
}
th,td
{
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Expense Tracker</h1>
<form action="">
<label for="date">Date: </label>
<input type="date" id="date">
<br>
<label for="desc">Description: </label>
<input type="text" id="desc">
<br>
<label for="amount">Amount: </label>
<input type="number" id="amount">
<br>
<input type="button" id="submit" value="Submit">
<br>
</form>
<table id="table">
<tr>
<th>Date</th>
<th>Description</th>
<th>Amount</th>
</tr>
</table>
<div id="total"></div>
<script type="text/javascript">
var total = 0;
document.getElementById("submit").onclick=function()
{
document.getElementById("table").style.display="block";
var table = document.getElementById("table");
var row = table.insertRow(-1);
var date = row.insertCell(0);
var desc = row.insertCell(1);
var amt = row.insertCell(2);
date.innerHTML = document.getElementById("date").value;
desc.innerHTML = document.getElementById("desc").value;
amt.innerHTML = document.getElementById("amount").value;
total += document.getElementById("amount").value;
document.getElementById("total").innerHTML = 'Total: ' + total;
return false;
}
</script>
</body>
</html>我试图在单击“提交”按钮后将表格中提供的输入插入表格中，并在该特定条目之后打印总金额。但是这里的金额只是作为一个字符串附加到总数上。例如，total的初始值为0，而数量为2时，total应该为'2'，而应为'02'。我该如何解决？
解决方法
您应该按如下所示将值转换为数字
@PostMapping(value = "/post/view/{id}",produces = MediaType.APPLICATION_JSON_VALUE)
public @ResponseBody
void newComment(@PathVariable Long id) {
System.out.println("Requested with id = " + id);
}
因为以下语句返回的值默认为字符串
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<body>
<script>
function madeAjaxCall() {
$.ajax({
type: "post",url: "/post/view/5"
})
}
</script>
<input type="button" value="Ajax Submit" onclick="madeAjaxCall();"/>
</body>
</html>
有关输入值的更多信息，您可以检查此link
,替换此：
total += document.getElementById("amount").value;
具有：
total += JSON.parse(document.getElementById("amount").value); //JSON.parse turns
<html>
<head>
<title>Expense Tracker</title>
<style type="text/css">
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button
{
-webkit-appearance: none;
margin: 0;
}
table
{
display: none;
}
td,th
{
text-align: center;
}
th,td
{
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Expense Tracker</h1>
<form action="">
<label for="date">Date: </label>
<input type="date" id="date">
<br>
<label for="desc">Description: </label>
<input type="text" id="desc">
<br>
<label for="amount">Amount: </label>
<input type="number" id="amount">
<br>
<input type="button" id="submit" value="Submit">
<br>
</form>
<table id="table">
<tr>
<th>Date</th>
<th>Description</th>
<th>Amount</th>
</tr>
</table>
<div id="total"></div>
<script type="text/javascript">
var total = 0;
document.getElementById("submit").onclick=function()
{
document.getElementById("table").style.display="block";
var table = document.getElementById("table");
var row = table.insertRow(-1);
var date = row.insertCell(0);
var desc = row.insertCell(1);
var amt = row.insertCell(2);
date.innerHTML = document.getElementById("date").value;
desc.innerHTML = document.getElementById("desc").value;
amt.innerHTML = document.getElementById("amount").value;
total += JSON.parse(document.getElementById("amount").value);
document.getElementById("total").innerHTML = 'Total: ' + total;
return false;
}
</script>
</body>
</html>,
如果要将total变量用作数字，则应输入
total += Number(document.getElementById("amount").value)
或者，如果您想使用total作为字符串，则应像下面这样重写
var total = ''
您还可以使用一元运算符+转换为数字。
total += +document.getElementById("amount").value;
https://www.javascripttutorial.net/javascript-unary-operators/