js 商城加减按钮

2021-10-26 22:33:45 阅读：164 来源： 互联网

标签：function getElementsByTagName 加减 innerHTML js oInp oEm 按钮 var

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
</head>
<style>
*{padding:0;margin:0;}
em,i{font-style:normal;font-size:20px;margin:0 20px;}
input{width:50px;height:50px;text-align:center;line-height:50px;}



</style>
<script>
    window.onload=function(){
        var oUl=document.getElementsByTagName('ul')[0];
        var oLi=oUl.getElementsByTagName('li');


        for(var i=0;i<oLi.length;i++){
            fn1(oLi[i]);
        }

         function fn1(a) {
             var oInp=a.getElementsByTagName('input');
             var oEm=a.getElementsByTagName('em')[0];
             var oSpan=a.getElementsByTagName('span')[0];
             var oI=a.getElementsByTagName('i')[0];
             var par=parseFloat(oSpan.innerHTML);
             oInp[0].onclick = function () {
                 oEm.innerHTML--;
                 if (oEm.innerHTML < 0) {
                     oEm.innerHTML = 0
                 }
                 oI.innerHTML = oEm.innerHTML * par + '元';
             };
             oInp[1].onclick = function () {
                 oEm.innerHTML++;
                 oI.innerHTML = oEm.innerHTML * par + '元';
             };
         }
    }
</script>
<body>
<ul>
    <li>
        <input type="button" value="-">
        <em>0</em>
        <input type="button" value="+">
        <p>单价<span>12.5元</span>;合计<i>0元</i></p>
    </li>
    <li>
        <input type="button" value="-">
        <em>0</em>
        <input type="button" value="+">
        <p>单价<span>20.5元</span>;合计<i>0元</i></p>
    </li>
    <li>
        <input type="button" value="-">
        <em>0</em>
        <input type="button" value="+">
        <p>单价<span>9.5元</span>;合计<i>0元</i></p>
    </li>
    <li>
        <input type="button" value="-">
        <em>0</em>
        <input type="button" value="+">
        <p>单价<span>10.5元</span>;合计<i>0元</i></p>
    </li>
</ul>
<div>
    你购买的商品合计<b>0</b>件;共<span>0</span>元
</div>
</body>
</html>

标签：function,getElementsByTagName,加减,innerHTML,js,oInp,oEm,按钮,var
来源： https://www.cnblogs.com/anans/p/15468194.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

js 商城加减按钮