5-2作业题问题
来源：5-1 修改与建议
慕用9253382
2017-10-29 21:32:18
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>shopCar</title>
</head>
<link rel="stylesheet" href="css/shopCar.css">
<body>
<div class="container">
<header>
<div class="daoh-left">
<img src="img/logo.png" alt="">
<ul>
<a href="#"><li>课程</li></a>
<a href="#"><li>职业路径</li></a>
<a href="#"><li>实战</li></a>
<a href="#"><li>猿问</li></a>
<a href="#"><li>手记</li></a>
</ul>
</div>
<div class="daoh-right">
<div class="search">
<input type="text" placeholder="前端入门"><img src="img/search.jpg" alt=""></input>
</div>
<img src="img/lock.jpg" alt="">
<img src="img/clock.jpg" alt="">
<img src="img/ava.jpg" alt="">
</div>
</header>
<section>
<div class="banner"><img src="img/cart-header-bg.jpg" alt="">
<div class="shopcar">
<p class="mycar">我的购物车</p>
<div class="first">
<div class="table">
<div class="items">
<span><input type="checkbox" name="all" checked="checked" onclick="checkAll()"/>全选</span>
<span>商品名称</span>
<span>总价</span>
<span>单价</span>
<span>数量</span>
<span>操作</span>
</div>
</div>
<div class="table_common">
<div class="items_common" id="items_common">
<span><input type="checkbox" name="list" /></span>
<span><img src="img/g1.jpg" alt="" style="width:150px;height:80px"></span>
<span >前端小白成长记</span>
<span id="total">￥336</span>
<span id="price">￥336</span>
<span>
<input type="button" value="+" name="jia"/>
<input type="text" value="1" id="val" style="width:20px;height:20px"/>
<input type="button" value="-" name="jian"/>
</span>
<span>删除</span>
</div>
</div>
<div class="table_common" >
<div class="items_common">
<span><input type="checkbox" name="list"/></span>
<span><img src="img/g2.jpg" alt="" style="width:150px;height:80px"></span>
<span >前端小白成长记</span>
<span>￥336</span>
<span>￥336</span>
<span>
<input type="button" value="+" name="jia"/>
<input type="text" value="1" style="width:20px;height:20px"/>
<input type="button" value="-" name="jian"/>
</span>
<span>删除</span>
</div>
</div>
<div class="table_common">
<div class="items_common">
<span><input type="checkbox" name="list"/></span>
<span><img src="img/g1.jpg" alt="" style="width:150px;height:80px"></span>
<span >前端小白成长记</span>
<span>￥336</span>
<span>￥336</span>
<span>
<input type="button" value="+" name="jia"/>
<input type="text" value="1" style="width:20px;height:20px"/>
<input type="button" value="-" name="jian"/>
</span>
<span>删除</span>
</div>
</div>
<div class="table_common">
<div class="items_common">
<span><input type="checkbox" name="list"/></span>
<span><img src="img/g1.jpg" alt="" style="width:150px;height:80px"></span>
<span >前端小白成长记</span>
<span>￥336</span>
<span>￥336</span>
<span>
<input type="button" value="+" id="jia"/>
<input type="text" value="1" id="num" style="width:20px;height:20px"/>
<input type="button" value="-" id="jian"/>
</span>
<span>删除</span>
</div>
</div>
</div>
<div class="items_last">
<p>应付金额</p>
<p>￥<span>1584</span></p>
<button>去结算</button>
</div>
</div>
</div>
</section>
<footer>
<div class="footer_left">
<ul>
<a href="#"><li>网站首页</li></a>
<a href="#"><li>合作企业</li></a>
<a href="#"><li>人才招聘</li></a>
<a href="#"><li>联系我们</li></a>
<a href="#"><li>讲师招募</li></a>
<a href="#"><li>常见问题</li></a>
<a href="#"><li>意见反馈</li></a>
<a href="#"><li>慕课大学</li></a>
<a href="#"><li>有情链接</li></a>
</ul>
</div>
<div class="footer_right"><img src="img/wx.jpg" alt=""></div>
</footer>
</div>
<script type="text/javascript" src="js/shopCar.js"></script>
</body>
</html>
//js部分
var items_common=document.getElementById('items_common'),
inp_1=items_common.getElementsByTagName('input'),
total=document.getElementById("total"),
price=document.getElementById("price"),
val=document.getElementById("val"),
sum=0;
inp_1[1].onclick = function() {
inp_1[2].value = parseInt(inp_1[2].value) + 1;
}
inp_1[3].onclick = function() {
if(inp_1[2].value <= 0) {
inp_1[2].value = 0;
} else {
inp_1[2].value = parseInt(inp_1[2].value) - 1;
}
}
//单行计算
function jisuan(){
return sum=total.innerHTML= parseInt(price.innerHTML)*parseInt(val.value);
}
jisuan(sum);
//全选功能
var allNode = document.getElementsByName("all")[0];
var list = document.getElementsByName("list");
function checkAll() {
for(var x=0;x<list.length;x++) {
list[x].checked = allNode.checked;
}
}
//页面加载自动全选
window.onload=function() {
for(var x=0;x<list.length;x++) {
list[x].checked=allNode.checked;
}
}
2回答
-
怎么都被占用了呢
2017-10-30
每条商品的总价：给每条商品的加、减按钮绑定单击事件时，除了数量要加、减变化，还有更新一下该商品的总价，就是取到该条商品的数量值和单价值，相乘，将结果最为文本或者元素插入到对应总价的Dom结构中
应付金额的计算：遍历所有的商品，判断只有被选中的商品才能进行以下计算：获取当前遍历商品的总价，累加到一个初始值为0的变量上。遍历结束之后，将值输出在应付金额对应的元素中。
0 -
慕用9253382
提问者
2017-10-29
js部分主要卡在怎么计算价格 这个函数要怎么写？我计算出的结果是NAN，要怎么才能把它转化为数字计算呢？
0
相似问题