关于javascript变量作用域问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<table id="cartTable">
    <thead>
    <tr>
        <th><label><input class="check-all check" type="checkbox">  全选</label></th>
        <th>商品</th>
        <th>单价</th>
        <th>数量</th>
        <th>小计</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="checkbox"><input class="check-one check" type="checkbox"></td>
        <td class="goods"><img src="风景图片/1.jpg" alt=""/><span>Casio/卡西欧 EX-TR350</span></td>
        <td class="price">5999.88</td>
        <td class="count">
            <span class="reduce"> </span>
            <input class="count-input" type="text" value="1"/>
            <span class="add">+</span>
        </td>
        <td class="subtotal">5999.88</td>
        <td class="operation"><span class="delete">删除</span></td>
    </tr>
    <tr>
        <td class="checkbox"><input class="check-one check" type="checkbox"></td>
        <td class="goods"><img src="风景图片/2.jpg" alt=""/><span>Casio/卡西欧 EX-TR350</span></td>
        <td class="price">5999.88</td>
        <td class="count">
            <span class="reduce"> </span>
            <input class="count-input" type="text" value="1"/>
            <span class="add">+</span>
        </td>
        <td class="subtotal">5999.88</td>
        <td class="operation"><span class="delete">删除</span></td>
    </tr>
    <tr>
        <td class="checkbox"><input class="check-one check" type="checkbox"></td>
        <td class="goods"><img src="风景图片/3.jpg" alt=""/><span>Casio/卡西欧 EX-TR350</span></td>
        <td class="price">5999.88</td>
        <td class="count">
            <span class="reduce"> </span>
            <input class="count-input" type="text" value="1"/>
            <span class="add">+</span>
        </td>
        <td class="subtotal">5999.88</td>
        <td class="operation"><span class="delete">删除</span></td>
    </tr>
    <tr>
        <td class="checkbox"><input class="check-one check" type="checkbox"></td>
        <td class="goods"><img src="风景图片/4.jpg" alt=""/><span>Casio/卡西欧 EX-TR350</span></td>
        <td class="price">5999.88</td>
        <td class="count">
            <span class="reduce"> </span>
            <input class="count-input" type="text" value="1"/>
            <span class="add">+</span>
        </td>
        <td class="subtotal">5999.88</td>
        <td class="operation"><span class="delete">删除</span></td>
    </tr>

    </tbody>
</table>
<div class="foot" id="foot">
    <label class="fl select-all"><input type="checkbox" class="check-all check"> 全选</label>
    <a class="fl delete" id="deleteAll" href="javascrpt:;">删除</a>
    <div class="fr closing">结算</div>
    <div class="fr total">合计: ￥<span id="priceTotal">0.00</span></div>
    <div class="fr selected"><a id="selected">已选商品</a>
        <span id="selectedTotal">0</span>件
        <span class="arrow up">∧</span>
        <span class="arrow down">∨</span>
    </div>
    <div class="selected-view">
        <div id="selectedViewList" class="clearfix">
            
        </div>
        <span class="arrow">.<span>.</span></span>
    </div>
</div>
<script>
    window.onload = function (ev) {
        if (!document.getElementsByClassName) {
            document.getElementsByClassName = function (classNames) {
                var ret = [];
                var els = document.getElementsByTagName("*");
                for (var i = 0, len = els.length; i < len; i++) {
                    if (els[i.className === classNames]
                        || els[i].className.indexOf(classNames + " ") >= 0
                        || els[i].className.indexOf(" " + classNames) >= 0
                        || els[i].className.indexOf(" " + classNames + " ") >= 0) {
                        ret.push(els[i]);
                    }
                }
                return ret;
            }
        }

        var cartTable = document.getElementById("cartTable");
        var checkInputs = document.getElementsByClassName("check");                 //取得所有选择框
        var checkAllInputs = document.getElementsByClassName("check-all");          //取得全选框
        var tr = cartTable.children[1].rows;                               //存放节点下所有的tr元素

        var selectedTotal = document.getElementById("selectedTotal");               //取得商品件数
        var priceTotal = document.getElementById("priceTotal");                     //取得选中总计价格
        var selectedViewList=document.getElementById("selectedViewList");

        //小计
        function getSubTotal(tr) {
            var tds=tr.cells;
            var price=parseFloat(tds[2].innerHTML);
            var count=parseInt(tr.getElementsByTagName("input")[1].value);
            var SubTotal=parseFloat(price * count);
            tds[4].innerHTML=SubTotal;
        }

    var selectedViewList=document.getElementById("selectedViewList");
    var tr = cartTable.children[1].rows;                               //存放节点下所有的tr元素

    selectedViewList.onclick=function (e) {

        e=e||window.event;                    //IE兼容配置
        var el=e.srcElement;
        if (el.className=="del"){
            var index=el.getAttribute("index");
            var input =tr[index].getElementsByTagName("input")[0];
            input.checked=false;
            input.onclick();
         }
    }

        //小计
        function getSubTotal(tr) {
            var tds=tr.cells;
            var price=parseFloat(tds[2].innerHTML);
            var count=parseInt(tr.getElementsByTagName("input")[1].value);
            var SubTotal=parseFloat(price * count);
            tds[4].innerHTML=SubTotal;
        }

        //计算
        function getTotal() {
            var seleted = 0;           //总数
            var price = 0;                //价格
            var HTMLstr='';
            for (var i = 0, len = tr.length; i < len; i++) {
                if (tr[i].getElementsByTagName("input")[0].checked) {
                    tr[i].className = 'on';
                    seleted += parseInt(tr[i].getElementsByTagName("input")[1].value);//parseInt转化为数字
                    price += parseFloat(tr[i].cells[4].innerHTML);                   //cells 取得表格所有td
                    HTMLstr+='<div><img src="'+tr[i].getElementsByTagName('img')[0].src+'"><span class="del" index="'+i+'">取消选择</span></div>'

                } else {
                    tr[i].className = "";
                }
            }
            selectedTotal.innerHTML = seleted.toFixed(0);
            priceTotal.innerHTML = price.toFixed(2);//保留两位小数
            selectedViewList.innerHTML=HTMLstr;

            if (seleted==0){
                foot.className="foot";
            }
        }

        for (var i = 0, len = checkInputs.length; i < len; i++) {
            checkInputs[i].onclick = function () {
                if (this.className === "check-all check") {
                    for (var j = 0; j < checkInputs.length; j++) {        //遍历所有选择框
                        checkInputs[j].checked = this.checked;      //把选择框的状态与全选框保持一致
                    }
                }
                if (this.checked == false) {
                    for (var k = 0; k < checkAllInputs.length; k++) {     //遍历所有选择框
                        checkAllInputs[k].checked = false;            //如果有一个未选那么将所有全选框改编成未选状态
                    }
                }
                getTotal();
            }
        } //给各个选择框绑定点击事件
        var selected = document.getElementById("selected");
        var foot = document.getElementById("foot");

        selected.onclick = function () {
            if (foot.className == "foot") {
                if (selectedTotal.innerHTML != 0){
                    foot.className = "foot show";
                }
            }
            else {
                foot.className = "foot";
            }
        }
    };

    for (var i=0;i<tr.length;i++){
        tr[i].onclick=function (e) {                  //访问不到
            e=e||window.event;
            var el=e.srcElement;
            var cls=el.className;
            var input=this.getElementsByTagName("input")[1];
            var val=parseInt(input.value);
            var reduce=this.getElementsByTagName("span")[1];
            switch (cls){
                case"add":
                    input.value=val+1;
                    reduce.innerHTML="-";
                    getSubTotal(this);                //访问不到
                    break;
                case"reduce":
                    if (val>1){
                        input.value=val-1;
                        getSubTotal(this);          //访问不到
                    } if (input.value<=1){
                    reduce.innerHTML=" ";
                }

                    break;
                default:
                    break;
            }
        }
        getTotal();
    }
</script>
</body>
</html>
541行的tr   552，557 的全局函数，怎么都访问不到
谁能解释一下这个作用域的问题，以及怎么改进代码书写能防止这样的问题发生

2 个解决方案

#1

#2

你的tr是 window.onload = function (ev) {} 事件函数内的局部变量，最后的for循环却在window.onload事件函数外面当然访问不到了。
你把for循环放到window.onload事件函数里面就好了

秒客网

关于javascript变量作用域问题

2 个解决方案

#1

#2

#1

#2

相关文章