JS计价问题，真不知道哪里错了浏览器也不报错

发布于
2016-07-17

心好累刚学JS怎么稍微复杂点的代码写一个错一个改七八遍还是不对真不知道哪出错了

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            window.onload=function(){
                var oul=document.getElementById("list");
                var oli=oul.getElementsByTagName("li");
                
                for(var i=0;i<oli.length;i++){
                    fn1(oli[i])
                }
                function fn1(oli){
                    var btn1=oli.getElementsByTagName("input")[0];
                    var ost=oli.getElementsByTagName("strong")[0];
                    var btn2=oli.getElementsByTagName("input")[1];
                    var em=oli.getElementsByTagName("em")[0];
                    var ospan=oli.getElementsByTagName("span")[0];
                    var n1=Number(ost.innerHTML);
                    var n2=parseFloat(em.innerHTML);
                    btn1.onclick=function(){
                        ost--;
                        if(ost<0){
                            ost=0;
                        }
                        ost.innerHTML=n1;
                        ospan.innerHTML=n1*n2+"元";
                        
                    }
                    btn2.onclick=function(){
                        ost++;
                        ost.innerHTML=n1; 
                        ospan.innerHTML=n1*n2+"元";
                        
                    }
            
                    
                }
            }
        </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>18</em>
                小计：<span>0元</span>
            </li>
            <li>
                <input type="button" value="-"/>
                <strong>0</strong>
                <input type="button" value="+"/>
                单价：<em>9.5</em>
                小计：<span>0元</span>
            </li>
            <li>
                <input type="button" value="-"/>
                <strong>0</strong>
                <input type="button" value="+"/>
                单价：<em>6.3</em>
                小计：<span>0元</span>
            </li>
            <li>
                <input type="button" value="-"/>
                <strong>0</strong>
                <input type="button" value="+"/>
                单价：<em>48.5</em>
                小计：<span>0元</span>
            </li>
        </ul>
        <p>商品合计共：0件，共花费了：0元</p>
        <p>其中最贵的商品单价是：0元。</p>
    </body>
</html>

html javascript

阅读 2.2k

2 个回答

得票最新

Tomoe

6.2k11012

发布于
2016-07-17

✓ 已被采纳

我想問題是出在你直接對著元素做運算了

這邊省略其他代碼


// 這是取得元素，不是裡面的值喔～
var ost = oli.getElementsByTagName("strong")[0];

btn1.onclick = function(){
// ost 是一元素，不能直接這樣運算
ost--;
if(ost<0){
    ost=0;
}
ost.innerHTML=n1;
ospan.innerHTML=n1*n2+"元";

}

可以改成

btn1.onclick = function(){
    // 取得 ost 裡面的 值，並轉換類型
    var currentNumber = parseInt(ost.innerHTML)
    // 這裡用到三元運算子 減一後小於零則返回 0 ，否則返回 currentNumber
    ost.innerHTML = --currentNumber < 0 ? 0 : currentNumber;
    ospan.innerHTML = n1 * n2 + "元";
}

btn2.onclick = function(){
    var currentNumber = parseInt(ost.innerHTML)
    ost.innerHTML = ++currentNumber;
    ospan.innerHTML = n1 * n2 + "元";
}