这道体不难,熟悉基本的api获取对应的节点,更新节点文本内容即可。
// 1. 获取节点
const zjIncrease = document.getElementById('zjtaishaola');
const zjDecrease = document.getElementById('zj***ola');
const klIncrease = document.getElementById('kltaishaola');
const klDecrease = document.getElementById('kl***ola');
const totalNd = document.getElementById('total');
const zjslNd = document.getElementById('zjsl');
const klslNd = document.getElementById('klsl');
// 2. 数量和价格
const zjPrice = 28;
const klPrice = 5;
let zjTotal = 0;
let klTotal = 0;
let priceTotail = 0;
// 3. 计算总价
function computedTotal() {
totalNd.innerText = zjPrice * zjTotal + klPrice * klTotal;
}
// 4. 点击事件
zjIncrease.onclick = function () {
zjTotal++;
zjslNd.innerText = zjTotal;
computedTotal();
};
zjDecrease.onclick = function () {
zjTotal = --zjTotal >= 0 ? zjTotal : 0;
zjslNd.innerText = zjTotal;
computedTotal();
};
klIncrease.onclick = function () {
klTotal++;
klslNd.innerText = klTotal;
computedTotal();
};
klDecrease.onclick = function () {
klTotal = --klTotal >= 0 ? klTotal : 0;
klslNd.innerText = klTotal;
computedTotal();
};