思路:
1.获取元素
2.为加号添加单击事件
(1)先获取到原先购物车的数字
(2)数量自加+1
(3)重新赋值给输入框
(4最后一步) 重新点击加号按钮的,恢复减号按钮的点击功能
3.为减号添加单击事件
(1)先获取到原先购物车的数字
(2)数量自减-1
(3)重新赋值给输入框
(4)进行判断,当数字为1时,禁用减号按钮
<style>
div {
width: 80px;
}
input[type='text'] {
width: 50px;
height: 44px;
outline: none;
border: 1px solid #ccc;
text-align: center;
border-right: 0;
}
input[type='button'] {
height: 24px;
width: 22px;
cursor: pointer;
}
input {
float: left;
border: 1px solid #ccc;
}
</style>
<div>
<input type="text" id="total" value="1" readonly />
<input type="button" value="+" id="add" />
<input type="button" value="-" id="reduce" />
</div>
<script>
//获取元素
let add = document.querySelector('#add')
let reduce = document.querySelector('#reduce')
let total = document.querySelector('#total')
//为加号按钮添加单击事件
add.addEventListener('click', function () {
// 获取原先的购物车数字
let num = total.value
// 自增
num++
//赋值回去
total.value = num
//从新点击加号按钮的,恢复减号按钮的点击功能
reduce.disabled = false
})
//为减号按钮添加单击事件
reduce.addEventListener('click', function () {
// 获取原先的购物车数字
let num = total.value
// 自减
num--
//赋值回去
total.value = num
//判断,当数字为1时,禁用减号按钮
if (num == 1) {
reduce.disabled = true
}
})
</script>