关于javascript变量作用域问题

weixin_40980353 2018-05-26 01:34:31

<!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 的全局函数，怎么都访问不到
谁能解释一下这个作用域的问题，以及怎么改进代码书写能防止这样的问题发生

...全文