题解 | #购物面板#
购物面板
https://www.nowcoder.com/practice/1448469386f746f5941db2712372f373
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<table>
<thead>
<caption>
商品
</caption>
</thead>
<tbody>
<tr>
<td>炸鸡</td>
<td>28元</td>
<td><button id="zjtaiduola">-</button></td>
<td><span id="zjsl">0</span></td>
<td><button id="zjtaishaola">+</button></td>
</tr>
<tr>
<td>可乐</td>
<td>5元</td>
<td><button id="kltaiduola">-</button></td>
<td><span id="klsl">0</span></td>
<td><button id="kltaishaola">+</button></td>
</tr>
<tr>
<td>总价：</td>
<td><span id="total">0</span></td>
</tr>
</tbody>
</table>
<script type="text/javascript">
// 补全代码
function randenAllPrice() {
var zj = document.querySelector("#zjsl").innerHTML
var kl = document.querySelector("#klsl").innerHTML
var allPrice = parseInt(zj) * 28 + parseInt(kl) * 5
document.querySelector("#total").innerHTML = allPrice
}
document.querySelector("#zjtaiduola").addEventListener("click", function () {
var zjsl = parseInt(document.querySelector("#zjsl").innerHTML)
zjsl--
if (zjsl <= 0) {
zjsl = 0
}
document.querySelector("#zjsl").innerHTML = zjsl
randenAllPrice()
})
document.querySelector("#zjtaishaola").addEventListener("click", function () {
var zjsl = parseInt(document.querySelector("#zjsl").innerHTML)
zjsl++
document.querySelector("#zjsl").innerHTML = zjsl
randenAllPrice()
})
document.querySelector("#kltaishaola").addEventListener("click", function () {
var klsl = parseInt(document.querySelector("#klsl").innerHTML)
klsl++
document.querySelector("#klsl").innerHTML = klsl
randenAllPrice()
})
document.querySelector("#kltaiduola").addEventListener("click", function () {
var klsl = parseInt(document.querySelector("#klsl").innerHTML)
klsl--
if (klsl <= 0) {
klsl = 0
}
document.querySelector("#klsl").innerHTML = klsl
randenAllPrice()
})
</script>
</body>
</html>
