如何书写一个商品累计的实例

       <div class="div1">
        <div>
            <button class="reduce" id="reduce1">-</button>
            <span class="number">0</span>
            <button class="add" id="add1">+</button>
        </div>
        <div>
            <i>单价：</i><i class="i">12.5</i>
            <span>小计：<em class="price">0</em>元</span>
        </div>
    </div>
    <div class="div1">
        <div>
            <button class="reduce" id="reduce2">-</button>
            <span class="number">0</span>
            <button class="add" id="add2">+</button>
        </div>
        <div>
            <i>单价：</i><i class="i">13.5</i>
            <span>小计：<em class="price">0</em>元</span>
        </div>
    </div>
    <div class="div1">
        <div>
            <button class="reduce" id="reduce3">-</button>
            <span class="number">0</span>
            <button class="add" id="add3">+</button>
        </div>
        <div>
            <i>单价：</i><i class="i">14.5</i>
            <span>小计：<em class="price">0</em>元</span>
        </div>
    </div>
    <div class="div1">
        <div>
            <button class="reduce" id="reduce4">-</button>
            <span class="number">0</span>
            <button class="add" id="add4">+</button>
        </div>
        <div>
            <i>单价：</i><i class="i">15.5</i>
            <span>小计：<em class="price">0</em>元</span>
        </div>
    </div>
    <div class="div1">
        <div>
            <button class="reduce" id="reduce5">-</button>
            <span class="number">0</span>
            <button class="add" id="add5">+</button>
        </div>
        <div>
            <i>单价：</i><i class="i">16.5</i>
            <span>小计：<em class="price">0</em>元</span>
        </div>
    </div>
    <div class="footer">
        <div>商品总计共:<span id="allNum">0</span>件，共花费了：<span id="allPrice"></span>元</div>
        <div>其中最贵的已选商品是：<span id="MaxPrice">0</span>元</div>
    </div>

        .div1 {
            width: 100%;
            height: 50px;
            margin-top: 20px;
        }
        
        button {
            width: 50px;
            height: 30px;
            background: rgb(34, 33, 33);
            color: white;
            float: left;
            border: none;
        }
        
        .div1 span,
        i {
            display: block;
            height: 30px;
            width: 40px;
            background: #eee;
            float: left;
            text-align: center;
            line-height: 30px;
            font-size: 12px;
        }
        
        .div1 span {
            width: 80px;
        }
        
        .footer {
            width: 280px;
            height: 50px;
            /* margin-top: 10px; */
            background: #eee;
            font-size: 12px;
            /* text-align: center; */
            line-height: 25px;
        }

   //获取加号的元素
   var adds = document.querySelectorAll('.add');
   //获取减号的元素
   var reduces = document.querySelectorAll('.reduce');
   //获取数量的元素
   var nums = document.querySelectorAll('.number');
   //获取小计的元素
   var prices = document.querySelectorAll('.price');
   //获取单价的元素
   var is = document.querySelectorAll('.i');
   //获取全部商品数量总计的元素
   var allNum = document.getElementById('allNum');
   //获取全部商品价格总计的元素
   var allPrice = document.getElementById('allPrice');
   //获取最大商品价格的元素
   var MaxPrice = document.getElementById('MaxPrice');

   for (var i = 0; i < adds.length; i++) {
       todo(i)

   }

   //点击数量变化的总函数
   function todo(index) {
       adds[index].onclick = function() {
           //调用数量增加的函数
           todoall(index, 1)
       }
       reduces[index].onclick = function() {
             //调用数量减少的函数
           todoall(index, -1)
       }
   }
   //计算数量的函数
   function todoall(index, change) {
       var num = +nums[index].innerHTML + change
       if (num > 10) {
           num = 10;
           alert('最大数量只能为10哦')
       }
       if (num < 0) {
           num = 0;
            alert('最小数量只能为0哦')
       }
       nums[index].innerHTML = num;
       prices[index].innerHTML = num * is[index].innerHTML
       total()
   }
   //计算全部数量的总计、价钱总计、最贵商品函数
   function total() {
       var totalnum = 0;
       var totalPrice = 0;
       var max = 0;
       for (var i = 0; i < nums.length; i++) {
           totalnum = totalnum + (+nums[i].innerHTML);
           totalPrice = totalPrice + +prices[i].innerHTML;
           if (nums[i].innerHTML > 0) {
           //三目运算取出最大的商品价格
               max = is[i].innerHTML > max ? is[i].innerHTML : max;
           }
       }
       allPrice.innerHTML = totalPrice;
       allNum.innerHTML = totalnum;
       MaxPrice.innerHTML = max;
   }