值传不进去哪里出错了？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物车</title>
<link rel="stylesheet" type="text/css" href="css/css.css">
</head>
<body>
<section class="section">
<div class="header">
<div class="logo">
<img src="img/logo.png">
</div>
<div class="nav">
<ul>
<li>课程</li>
<li>职业路径</li>
<li>猿问</li>
<li>实战</li>
<li>手记</li>
</ul>
</div>
<div class="right">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</section>
<section>
<div class="banner">
<h1>我的购物车</h1>
</div>
</section>
<section class="shopping_1">
<div class="shopping">
<div class="shopping-1">
<div class="shopping_left">
<ul>
<li><input type="checkbox" id="checkbox" name=""></li>
<li>全选</li>
<li>商品名称</li>
</ul>
</div>
<div class="shopping_center">
<ul>
<li>总价</li>
<li>单价</li>
<li>数量</li>
</ul>
</div>
<div class="shopping_right">
<ul>
<li>操作</li>
</ul>
</div>
</div>
<div class="shopping-2">
<div class="shop_left">
<ul>
<li><input type="checkbox" id="checkbox_1" name=""></li>
<li><img src="img/g1.jpg"></li>
<li>前端小白成长日记</li>
</ul>
</div>
<div class="shop_center">
<ul>
<li id="count_price">￥365</li>
<li>￥365</li>
<li><span id="reduce">-</span><input type="text" id="text" value="1"><span id="add">+</span></li>
</ul>
</div>
<div class="shop_right">
<ul>
<li>删除</li>
</ul>
</div>
</div>
<div class="shopping-2">
<div class="shop_left">
<ul>
<li><input type="checkbox" id="checkbox_1" name=""></li>
<li><img src="img/g2.jpg"></li>
<li>前端小白成长日记</li>
</ul>
</div>
<div class="shop_center">
<ul>
<li id="count_price">￥365</li>
<li>￥365</li>
<li><span id="reduce">-</span><input type="text" id="text" value="1"><span id="add">+</span></li>
</ul>
</div>
<div class="shop_right">
<ul>
<li>删除</li>
</ul>
</div>
</div>
<div class="shopping-2">
<div class="shop_left">
<ul>
<li><input type="checkbox" id="checkbox_1" name=""></li>
<li><img src="img/g1.jpg"></li>
<li>前端小白成长日记</li>
</ul>
</div>
<div class="shop_center">
<ul>
<li id="count_price">￥365</li>
<li>￥365</li>
<li><span id="reduce">-</span><input type="text" id="text" value="1"><span id="add">+</span></li>
</ul>
</div>
<div class="shop_right">
<ul>
<li>删除</li>
</ul>
</div>
</div>
<div class="shopping-2">
<div class="shop_left">
<ul>
<li><input type="checkbox" id="checkbox_1" name=""></li>
<li><img src="img/g1.jpg"></li>
<li>前端小白成长日记</li>
</ul>
</div>
<div class="shop_center">
<ul>
<li id="count_price">￥365</li>
<li>￥365</li>
<li><span id="reduce">-</span><input type="text" id="text" value="1"><span id="add">+</span></li>
</ul>
</div>
<div class="shop_right">
<ul>
<li>删除</li>
</ul>
</div>
</div>
</div>
</section>
<section>
<div class="price">
<span id="sum"></span>
<input type="text" name=""><button>去结算</button>
</div>
</section>
<section class="footer-1">
<div class="footer">
<div class="footer-left">
<ul>
<li>网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>讲师招聘</li>
<li>常见问题</li>
<li>意见反馈</li>
<li>慕课大学</li>
<li>友情链接</li>
</ul>
<p>Copyjasd © 2017 imooc cos All kjsahjsab| 京ICP备 13031565号</p>
</div>
<p class="footer-right">
<span></span>
<span></span>
<span></span>
</p>
</div>
</section>
<script type="text/javascript" src="js/js.js"></script>
</body>
</html>
var checkbox=document.getElementById('checkbox');//单选框
var count=document.getElementById('count_price');//总价
var add=document.getElementById('add');//加
var reduce=document.getElementById('reduce');//减
var sum1=document.getElementById('sum')//应付金额
var click=true;
//全选
checkbox.onclick=function(){
if (click) {
for (var i = 0; i < checkbox_1.length; i++) {
checkbox_1[i].checked = false;
checkbox.checked = false;
click = false;
sum1.innerHTML='应付金额：￥';
}
} else {
for (var i = 0; i < checkbox_1.length; i++) {
checkbox_1[i].checked = true;
click = true;
checkbox.checked = true;
sum1(sum,count);
}
}
};
//判断单选框
for (var i = 0; i < checkbox_1.length; i++) {
(function(i) {
checkbox_1[i].setAttribute('check', 'yes');
checkbox_1[i].onclick = function() {
if (this.getAttribute('check') == 'yes') {
var sum = parseInt(count.innerHTML.substring(1));
var num = parseInt(checkbox_1[i].innerHTML.substring(1));
console.log(num);
sum = sum - num;
count.innerHTML = '￥' + sum;
this.setAttribute('check', 'no');
} else {
var sum = parseInt(count.innerHTML.substring(1));
var num = parseInt(checkbox_1[i].innerHTML.substring(1));
console.log(num);
sum = sum + num;
count.innerHTML = '￥' + sum;
this.setAttribute('check', 'yes');
}
var arr = [];
for (var a = 0; a < checkbox_1.length; a++) {
arr.push(checkbox_1[a].getAttribute('check'));
}
if (arr.indexOf('no') == -1) {
checkbox.checked = true;
} else {
checkbox.checked = false;
}
}
})(i)
};
//加法函数
function Add() {
for (var i = 0; i < add.length; i++) {
(function(i) {
add[i].onclick = function() {
text[i].value = +text[i].value + +1;
sum1[i].innerHTML = '￥' + (text[i].value * 198);
Total(sum1, count);
};
})(i)
};
}
//减法函数
function Subtract() {
for (var i = 0; i < reduce.length; i++) {
(function(i) {
reduce[i].onclick = function() {
if (text[i].value <= 1) {
text[i].value = '1';
} else {
text[i].value = text[i].value - 1;
count[i].innerHTML = '￥' + (text[i].value * 198);
Total(sum1, count);
}
}
})(i)
};
}
//计算总计
function Total(num1, num2, num3) {
var sum = 0;
for (var i = 0; i < num2.length; i++) {
sum = sum + parseInt(num2[i].innerHTML.substring(1));
};
num1.innerHTML = '￥' + sum;
};
Add();
Subtract();
Total(sum1, count);
*{
margin: 0;
padding: 0;
}
li{
list-style:none;
}
.section{
width: 100%;
height: 60px;
background: #000;
}
.header{
width: 100%;
height: 60px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.nav ul{
width: 500px;
height: 60px;
display: flex;
flex-direction: row;
justify-content: space-around;
position: relative;
}
.nav li{
display: block;
width: 100px;
text-align: center;
line-height: 60px;
color: #fff;
cursor: pointer;
}
.nav li:nth-child(2):after{
content: '';
display: block;
position: absolute;
left: 180px;
top: 7px;
background-position: 0px 0px;
background-image: url(../img/icon-new.png);
width: 16px;
height: 12px;
}
.nav li:hover{
color: #fff;
background: orange;
}
.right{
width: 400px;
height: 60px;
display: flex;
flex-direction: row;
align-items: center;
position: relative;
}
.right div:nth-child(1){
background: #000;
border: none;
border-bottom: 1px solid #ccc;
position: relative;
width: 190px;
height: 30px;
}
.right div:nth-child(1):before{
content: '前端入门';
display: block;
position: absolute;
left: 0;
top: -4px;
color: #eee;
width: 70px;
height: 30px;
background: gray;
line-height: 30px;
text-align: center;
}
.right div:nth-child(1):after{
content: '';
display: block;
position: absolute;
left: 150px;
top: 7px;
background-position: 0px 0px;
background-image: url(../img/icon-1-sprite_w22.png);
width: 22px;
height: 22px;
}
.right div:nth-child(2){
display: block;
width: 60px;
height: 60px;
}
.right div:nth-child(2):before{
content: '';
display: block;
position: absolute;
left: 210px;
top: 21px;
background-position: 0px 21px;
background-image: url(../img/icon-1-sprite_w22.png);
width: 22px;
height: 22px;
}
.right div:nth-child(3){
display: block;
width: 60px;
height: 60px;
}
.right div:nth-child(3):before{
content: '';
display: block;
position: absolute;
left: 270px;
top: 21px;
background-position: 0px 44px;
background-image: url(../img/icon-1-sprite_w22.png);
width: 22px;
height: 22px;
}
.right div:nth-child(4){
display: block;
width: 60px;
height: 60px;
}
.right div:nth-child(4):before{
content: '';
display: block;
position: absolute;
left: 315px;
top: 5px;
background-position: 100% 100%;
background-size: 100%;
background-image: url(../img/ava.jpg);
width: 50px;
height: 50px;
border-radius: 50%;
}
.banner{
background-image: url(../img/cart-header-bg.jpg);
width: 100%;
height: 150px;
position: relative;
}
.banner h1{
left: 270px;
top: 40px;
position: absolute;
}
.shopping_1{
width: 100%;
height: 510px;
}
.shopping{
width: 900px;
height: 520px;
left: 50%;
margin-left: -400px;
border: 1px solid #ccc;
box-shadow: 0 0 5px 2px #ccc;
position: absolute;
margin-top: -60px;
}
.shopping-1{
width: 100%;
height: 60px;
background: #ccc;
}
.shopping-1 .shopping_left{
float: left;
width: 300px;
display: flex;
flex-direction: row;
}
.shopping-1 .shopping_left li,
.shopping-1 .shopping_center li,
.shopping-1 .shopping_right li
{
float: left;
margin-left: 10px;
text-align: center;
line-height: 60px;
}
.shopping-1 .shopping_center li{
padding:0 30px;
}
.shopping-1 .shopping_center{
float: left;
width: 400px;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.shopping-1 .shopping_right{
float: left;
width: 200px;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.shopping-2{
width: 100%;
border-bottom: 1px solid #ccc;
height: 115px;
}
.shop_left{
float: left;
width: 340px;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
margin-top: 10px;
}
.shop_left li{
float: left;
margin-left: 10px;
}
.shop_left li:nth-child(1){
line-height: 90px;
}
.shop_center{
float: left;
width: 400px;
display: flex;
flex-direction: row;
justify-content: space-around;
margin-top: 20px;
}
.shop_center li{
width: 100px;
float: left;
}
.shop_center li span{
cursor: pointer;
}
.shop_center li:nth-child(3) input{
width: 30px;
cursor: pointer;
}
.shop_right{
float: left;
width: 135px;
text-align:center;
margin-top: 20px;
}
.price{
width: 900px;
height: 40px;
margin-left: 274px;
position: relative;
}
.price input{
width: 700px;
height: 40px;
}
.price button{
width: 196px;
height: 46px;
border: none;
border:1px solid #ccc;
background: red;
color: #fff;
}
.price span{
position: absolute;
right: 270px;
top: 12px;
color: red;
}
.footer-1{
width: 100%;
height: 100px;
background: #000;
}
.footer{
width: 900px;
margin-top: 30px;
margin-left: 274px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.footer-left{
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 30px;
}
.footer ul{
width: 700px;
display: flex;
}
.footer ul li{
color: #fff;
width: 80px;
}
.footer p{
color: #fff;
position: relative;
}
.footer-right span:nth-child(1){
background-position: 4px 48px;
background-image: url(../img/footer-sprite.png);
width: 39px;
height: 39px;
border-radius: 50%;
margin-top: 20px;
position: absolute;
}
.footer-right span:nth-child(2){
background-position: 4px 90px;
background-image: url(../img/footer-sprite.png);
width: 39px;
height: 39px;
border-radius: 50%;
left: -39px;
margin-top: 22px;
position: absolute;
}
.footer-right span:nth-child(3){
background-position: 4px 133px;
background-image: url(../img/footer-sprite.png);
width: 39px;
height: 39px;
border-radius: 50%;
left: -77px;
margin-top: 22px;
position: absolute;
}0
收起
正在回答 回答被采纳积分+1
3回答
慕后端8593059
2018-12-28 10:38:16
var checkbox=document.getElementById('checkbox');//单选框
var count=document.getElementsByClassName('count_price');//总价
var checkbox_1=document.getElementsByClassName('checkbox_1');
var add=document.getElementsByClassName('add');//加
var reduce=document.getElementsByClassName('reduce');//减
var sum1=document.getElementById('sum')//应付金额
var text=document.getElementsByClassName('text');
var click=false;
checkbox.onclick=function(){//全选
if (click) {
for (var i = 0; i < checkbox_1.length; i++) {
checkbox_1[i].checked = false;
checkbox.checked = false;
click = false;
sum1.innerHTML='应付金额：￥';
}
} else {
for (var i = 0; i < checkbox_1.length; i++) {
checkbox_1[i].checked = true;
click = true;
checkbox.checked = true;
Total(sum1,count);
}
}
};
var arr=[]//判断单选框
for (var i = 0; i < checkbox_1.length; i++) {
checkbox_1[i].setAttribute('check', 'yes');
arr.push(checkbox_1[i].getAttribute("check"));
(function(i) {
checkbox_1[i].onchange = function() {
var person=0;
if(checkbox_1[i].checked==false){
person=Number(num1.innerHTML)-Number(count.innerHTML);
num1.innerHTML=person;
console.log(num1.innerHTML);
checkbox_1[i].setAttribute('check', 'no');
arr.splice(i,1,"no")
}else{
person=Number(num1.innerHTML)+Number(count.innerHTML);
num1.innerHTML=person;
checkbox_1[i].setAttribute('check', 'yes');
arr.splice(i,1,"yes")
}
if(arr.indexOf("no")==-1){
whole.checked=true;
}else{
whole.checked=false;
}
}
})(i)
};
function Add() {//加法函数
for (var i = 0; i < add.length; i++) {
(function(i) {
add[i].onclick = function() {
text[i].value = +text[i].value + +1;
count[i].innerHTML = '￥' + (text[i].value * 365);
console.log(text[i].value * 365);
Total(sum1, count);
};
})(i)
};
}
function Subtract() {//减法函数
for (var i = 0; i < reduce.length; i++) {
(function(i) {
reduce[i].onclick = function() {
if (text[i].value <= 1) {
text[i].value = '1';
} else {
text[i].value = text[i].value - 1;
count[i].innerHTML = '￥' + (text[i].value * 365);
Total(sum1, count);
}
}
})(i)
};
}
function Total(num1, num2) {//计算总计
var sum = 0;
for (var i = 0; i < num2.length; i++) {
sum = sum + parseInt(num2[i].innerHTML.substring(1));
};
num1.innerHTML = '应付金额：￥' + sum;
};
Add();
Subtract();
Total(sum1, count);
相似问题
点击添加闪退
18
0
7
用intent传EditText里的值问题
44
0
12
引用传递和值传递
0
0
7
EL表达式获取参数的值并输出的问题
0
0
16
麻烦帮看看哪里错了？
53
0
9
登录后可查看更多问答，登录/注册
组件化思想开发电商网页 18版
- 参与学习 人
- 提交作业 467 份
- 解答问题 4826 个
本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识，不仅如此，还会学习如何利用组件化的思想来开发网页，知识点+案例，使得所学可以更好的得到实践。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星