34_购物面板

本题考点:元素获取、点击事件

根据题目要求,完成购物面板的数据计算,核心步骤有:

  1. 获取所有具有“id”属性的元素
  2. 创建重渲染函数
  3. 给四个按钮分别添加“onclick”事件,其中触发重渲染函数

参考答案

let total_zjsl = 0
let total_klsl = 0
let dom_zjtaiduola = document.querySelector('#zjtaiduola')
let dom_zjsl = document.querySelector('#zjsl')
let dom_zjtaishaola = document.querySelector('#zjtaishaola')
let dom_kltaiduola = document.querySelector('#kltaiduola')
let dom_klsl = document.querySelector('#klsl')
let dom_kltaishaola = document.querySelector('#kltaishaola')
let dom_total = document.querySelector('#total')

function redraw() {
    dom_zjsl.innerText = total_zjsl
    dom_klsl.innerText = total_klsl
    dom_total.innerText = total_zjsl * 28 + total_klsl * 5
}

dom_zjtaiduola.onclick = function() {
    if(total_zjsl > 0) total_zjsl --
    redraw()
}
dom_zjtaishaola.onclick = function() {
    total_zjsl ++
    redraw()
}

dom_kltaiduola.onclick = function() {
    if(total_klsl > 0) total_klsl --
    redraw()
}
dom_kltaishaola.onclick = function() {
    total_klsl ++
    redraw()
}