JS，通过增减商品数量，统计商品总价

最新推荐文章于 2023-12-12 20:05:23 发布

原创最新推荐文章于 2023-12-12 20:05:23 发布 · 499 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #前端

这段代码展示了如何在网页中使用JavaScript动态更新商品的数量并计算总价。通过按钮点击事件改变商品数量，实时更新每个商品的小计和全部商品的总价。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

求教，怎么修改代码才能统计多个数量和计算最终商品总价？

<script>

window.onload=function(){
  var oul=document.getElementById('list');
  var ali=oul.getElementsByTagName("li");
  
  fn1(ali[0]);
  fn1(ali[1]);
  fn1(ali[2]);
  function fn1(ali){
    var abtn=ali.getElementsByTagName("input");
    var ostrong=ali.getElementsByTagName("strong")[0];
    var oem=ali.getElementsByTagName("em")[0];
    var ospan=ali.getElementsByTagName("span")[0];
    var tol=document.getElementById('tol');
    var spe=document.getElementById('spe');

    var num1=Number(ostrong.innerHTML);
    var num2=parseFloat(oem.innerHTML);
    var num3=Number(tol.innerHTML);
    var num4=parseFloat(spe.innerHTML);

    abtn[0].onclick=function(){

      num1--;
      if(num1<0){
        num1=0;
      }
      ostrong.innerHTML=num1;
      ospan.innerHTML=num1*num2+"元";
    }
    abtn[1].onclick=function(){
      num1++;
      ostrong.innerHTML=num1;
      ospan.innerHTML=num1*num2+"元";
    }
    num3+=num1;
    num4+=num2;
  }

}


</script>

</head>


<body >

<ul id="list">
  <li>
    <input type="button" value="-">
    <strong>0</strong>
    <input type="button" value="+">
    单价：<em>12.5元</em>
    小计：<span>0元</span>
  </li>
  <li>
    <input type="button" value="-">
    <strong>0</strong>
    <input type="button" value="+">
    单价：<em>10.5元</em>
    小计：<span>0元</span>
  </li>
  <li>
    <input type="button" value="-">
    <strong>0</strong>
    <input type="button" value="+">
    单价：<em>8元</em>
    小计：<span>0元</span>
  </li>
</ul>

商品共合计：<span id="tol"> 0</span>件 &nbsp;
共花费了: <span id="spe"> 0 </span>元


</body>