商品购物面板

最新推荐文章于 2024-04-24 12:36:15 发布

慕千千Bebe

最新推荐文章于 2024-04-24 12:36:15 发布

阅读量133

点赞数

分类专栏： Javascript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_41988113/article/details/123481341

版权

Javascript 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

描述

请补全JavaScript代码，要求如下：
1. 当点击"-"按钮时，商品数量减1
2. 当点击"+"按钮时，商品数量加1
3. 每当点击任意按钮时，购物面板中相关信息必须同步更新
注意：
1. 必须使用DOM0级标准事件（onclick）

<!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">
            // 1、获取元素
            let zj=document.querySelector('#zjtaiduola');
            let zj1=document.querySelector('#zjsl');
            let _zj=document.querySelector('#zjtaishaola');
            let kl=document.querySelector('#kltaiduola');
            let kl1=document.querySelector('#klsl');
            let _kl=document.querySelector('#kltaishaola');
            let all=document.querySelector('#total');
            let count_zj=0;
            let count_kl=0;
            //重渲染函数，每次点击都要调用这个函数
            function redown(){
                zj1.innerHTML=count_zj;
                kl1.innerHTML=count_kl;
                all.innerHTML=count_zj*28+count_kl*5;
            }
            //给四个按钮分别添加“onclick”事件，其中触发重渲染函数
            zj.onclick=function(){
                if(count_zj>0) count_zj--;
                redown();
            }
            _zj.onclick=function(){
                count_zj++;
                redown();
            }
            kl.onclick=function(){
                if(count_kl>0) count_kl--;
                redown();
            }
            _kl.onclick=function(){
                count_kl++;
                redown();
            }
        </script>
    </body>
</html>

慕千千Bebe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
商品购物面板

描述请补全JavaScript代码，要求如下：1. 当点击"-"按钮时，商品数量减12. 当点击"+"按钮时，商品数量加13. 每当点击任意按钮时，购物面板中相关信息必须同步更新注意：1. 必须使用DOM0级标准事件（onclick）<!DOCTYPE html><html> <head> <meta charset=utf-8> </head> <body>
复制链接

扫一扫