在我的輸入（單價和數量）獲得負值后，我試圖停止該功能。當我的輸入為負值時，會彈出警告框，并且每一行的總價格仍然如預期的那樣為 0，但由于某種原因，總價格（底部的大灰色框）仍然顯示金額。插入負值后，如何使總價仍為 0？
這是我的代碼：
function calculateTotal(){
let sum = 0;
const rows = document.querySelectorAll('.row1');
rows.forEach(r => {
a = Number(r.querySelector('.qty').value);
b = Number(r.querySelector('.price').value);
c = a * b;
sum = c;
if(a<0){
alert("Negative values not allowed");
}
else if(b<0){
alert("Negative values not allowed");
}
else{
r.querySelector('.total').value = c.toFixed(2);
document.querySelector('.grandtotal').value = sum.toFixed(2);
}});
}body{
font-family: 'Itim', cursive;
background-image:url('../images/background.jpg')
}
table{
border-collapse: collapse;
width: 90%;
}
tr,td{
border: 1px solid black;
padding: 0.5rem;
}
.row{
text-align: center;
background: skyblue;
}
.row1 td:nth-child(1) {
text-align: right;
}
.row1:hover{
background-color: yellow;
}
.row1 select{
width: 100%;
}
.row2{
background: skyblue;
}
input{
width: 96.5%;
}
input td:nth-child(2,3){
text-align: left;
}
input[type="number"]{
text-align: right;
}
input.total:disabled{
background: silver;
border: 2px solid black;
text-align: right;
color: black;
}
input[type=button]{
display: block;
width: 18%;
height: 25px;
text-align: center;
font-size: 12px;
margin-right: 0;
margin-left: auto;
}
input.grandtotal{
background: silver;
border: 2px solid black;
display: block;
text-align: right;
color:black;
height: 30px;
width: 75%;
margin-left: auto;
margin-right: 0;
font-size: 18px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
<h1>Book Ordering System</h1>
<table>
<tr class="row">
<td><b>No.</b></td>
<td><b>Book Tilte</b></td>
<td><b>Author</b></td>
<td><b>Category</b></td>
<td><b>Unit Price</b></td>
<td><b>Quantity</b></td>
<td><b>Total</b></td>
</tr>
<tr class="row1">
<td>1</td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><select>
<option disabled selected>Please choose the category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td><input type="number" value="0.00" min="0" name="price" class="price"></td>
<td><input type="number" value="0" name="qty" class="qty"></td>
<td><input class="total" value="0.00" name="total" disabled></td>
</tr>
<tr class="row1">
<td>2</td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><select>
<option disabled selected>Please choose the category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td><input type="number" value="0.00" min="0" name="price" class="price"></td>
<td><input type="number" value="0" name="qty" class="qty"></td>
<td><input class="total" value="0.00" name="total" disabled></td>
</tr>
<tr class="row1">
<td>3</td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><select>
<option disabled selected>Please choose the category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td><input type="number" value="0.00" min="0" name="price" class="price"></td>
<td><input type="number" value="0" name="qty" class="qty"></td>
<td><input class="total" value="0.00" name="total" disabled></td>
</tr>
<tr class="row1">
<td>4</td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><select>
<option disabled selected>Please choose the category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td><input type="number" value="0.00" min="0" step="any" class="price" name="price"> </td>
<td><input type="number" value="0" name="qty" class="qty"></td>
<td><input class="total" value="0.00" name="total" disabled></td>
</tr>
<tr class="row1">
<td>5</td>
<td><input type="text"></td>
<td><input type="text"></td>
<td>
<select>
<option disabled selected>Please choose the category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td><input type="number" value="0.00" min="0" step="any" name="price" class="price"></td>
<td><input type="number" value="0" name="qty" class="qty"></td>
<td><input value="0.00" disabled class="total" name="total" ></td>
</tr>
<tr class="row2">
<td colspan="5"><input type="button" value="Calculate Grand Total Price" onclick="calculateTotal()">
</td>
<td colspan="2"><input class="grandtotal" value="0.00" disabled ></td>
</tr>
</table>uj5u.com熱心網友回復：
問題是，即使值為負數，您仍在增加 sum 變數。您需要將其移動到 else 陳述句中：
else{
c=a*b
r.querySelector('.total').value = c.toFixed(2);
document.querySelector('.grandtotal').value = sum.toFixed(2);
}});
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/489214.html
標籤：javascript html
上一篇：HTML物件阻塞事件監聽器