思路:分别获取炸鸡数量以及可乐数量,当点击删除按钮时,如果对应数量大于0,则将对应数量减一,当点击增加按钮时,则将对应数量加一,每点击按钮,则需要重新计算总价格。注意,计算total_price也可以抽象成一个函数单独拿出来,此处我没做处理。
<script type="text/javascript"> let zj_del=document.querySelector("#zjtaiduola") let zj_num=document.querySelector("#zjsl") let zj_add=document.querySelector("#zjtaishaola") let kl_del=document.querySelector("#kltaiduola") let kl_num=document.querySelector("#klsl") let kl_add=document.querySelector("#kltaishaola") let total_price=document.querySelector("#total") zj_del.onclick=function(){ if(zj_num.innerText>0) zj_num.innerText=parseInt(zj_num.innerText)-1 let price=28*parseInt(zj_num.innerText)+5*parseInt(kl_num.innerText) total_price.innerText=price.toString() } zj_add.onclick=function(){ zj_num.innerText=parseInt(zj_num.innerText)+1 let price=28*parseInt(zj_num.innerText)+5*parseInt(kl_num.innerText) total_price.innerText=price.toString() } kl_del.onclick=function(){ if(kl_num.innerText>0) kl_num.innerText=parseInt(kl_num.innerText)-1 let price=28*parseInt(zj_num.innerText)+5*parseInt(kl_num.innerText) total_price.innerText=price.toString() } kl_add.onclick=function(){ kl_num.innerText=parseInt(kl_num.innerText)+1 let price=28*parseInt(zj_num.innerText)+5*parseInt(kl_num.innerText) total_price.innerText=price.toString() } </script>
总结:获取span的内容使用的是span.innerText!!!注意,将数值转换为字符串使用的是num.toString()!!!注意,将字符串转换为数值使用的是parseInt(num)!!!