问题遇到的现象和发生背景
这是进行加入一个input框吗
遇到的现象和发生背景，请写出第一个错误信息
用代码块功能插入代码，请勿粘贴截图。 不用代码块回答率下降 50%
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物车</title>
<style>
.cart{width: 700px;padding: 0 10px 10px;border: 1px solid #D5E5F5;}
.cart-title {margin-bottom: 10px;font-size: 14px;border-bottom: 1px solid #AED2FF;line-height: 30px;height: 30px;font-weight: 700;text-indent: 15px;color: #333;font-family: 'Microsoft YaHei';}
.cart-table{width: 100%;margin: 0 auto;border-collapse: collapse;font-size: 12px;font-family: Verdana,"Microsoft YaHei";color: #333;}
.cart-table th{border-bottom: 2px solid #B2D1FF;font-weight: normal;height: 35px;line-height: 23px;}
.cart-item {background-color: #FAFCFF;border-bottom: 1px dotted #84B3FD;}
.cart-item td{height: 55px;text-align: center;}
.cart-item .cart-txt-left{text-align:left;}
.cart-name{color: #3366D4;font-weight: bold;}
.cart-subtotal{color: #FF3334;font-weight: bold;}
.cart-reduce,.cart-add{display:inline-block;width: 16px;height: 16px;line-height:16px;color: #FFF;background-color: #BDBDBD;border: 0;cursor: pointer;border-radius: 2px;font-family:'Arial';font-size:13.3333px;}
.cart-reduce:hover,.cart-add:hover{background-color: #FF9900;}
.cart-num {margin: 5px;width: 35px;text-align: center;height: 20px;line-height: 20px;padding: 0 3px;display:inline-block;background:#fff;border:1px solid #bbb}
.cart-del,.cart-all{color: #3366D4;}
.cart-del:hover,.cart-all:hover{text-decoration:underline;cursor:pointer}
.cart-bottom{height: 55px;text-align:right}
.cart-bottom .cart-all{position:relative;top:1px}
.cart-total-price{color: #FF3334;font-weight: bold;font-size: 16px;}
.cart-bottom-btn{color: #FFF;font-size: 14px;font-weight: 600;cursor: pointer;margin: 0 20px;background: #FE8502;border: 1px solid #FF6633;border-radius: 5px 5px 5px 5px;padding: 6px 12px;}
.cart-bottom-btn:hover{background: #FF6600;}
</style>
</head>
<body>
<div class="cart">
<div class="cart-title">我的购物车</div>
<table class="cart-table">
<tr>
<th width="60"><span class="cart-all">全选</span></th><th>商品</th><th width="120">单价</th><th width="100">数量</th><th width="120">小计</th><th width="80">操作</th>
</tr>
<tr class="cart-item">
<td><input class="cart-check" type="checkbox" checked></td>
<td class="cart-txt-left"><span class="cart-name">Loading...</span></td>
<td><span class="cart-price">0</span></td>
<td><span class="cart-reduce" >-</span><span class="cart-num">0</span><span class="cart-add">+</span></td>
<td><span class="cart-subtotal">0</span></td>
<td><span class="cart-del">删除</span></td>
</tr>
<tr class="cart-bottom">
<td colspan="6">
<span class="cart-bottom-span">已选择 <span class="cart-total-num">0</span> 件商品</span>
<span class="cart-bottom-span">总计：<span class="cart-total-price">0</span></span>
<span class="cart-bottom-btn">提交订单</span>
</td>
</tr>
</table>
</div>
<script src="ShopCart.js"></script>
<script>
ShopCart('cart', [
{name: 'JavaScript实战', price: 45.8, num: 1},
{name: 'PHP基础案例教程', price: 49.8, num: 2},
{name: 'HTML+CSS网页制作', price: 45.2, num: 5},
{name: 'Java基础入门', price: 45, num: 8},
]);
</script>
</body>
</html>
(function(window) {
/**
* ShopCart 购物车
* @param {String} prefix 前缀
* @param {Array} defCart 初始数据 [{name: '', price: 1, num: 1}]
*/
var ShopCart = function(prefix, defCart) {
Find.prototype.prefix = prefix; //prefix=cart
var cart = new Cart(document.getElementsByClassName(prefix)[0]);
//添加商品信息
for (var i in defCart) {
cart.add(defCart[i]);
}
cart.updateTotal();
};
/**
* Find 查找器
* @constructor
* @param {Object} obj 待查找对象所在容器
*/
function Find(obj) {
this.obj = obj;
}
Find.prototype = {
prefix: '',
/**
* 按照class查找元素
* @param {string} className
*/
className: function(className) {
return this.obj.getElementsByClassName(this.prefix + '-' + className)[0];
}
};
/**
* Cart 购物车商品管理
* @constructor
* @param {Object} obj 购物车容器对象
*/
function Cart(obj) {
this.items = [];
var find = new Find(obj);//查找对象所在容器
this.all = find.className('all');//getElementsByClassName("cart-all");
this.bottom = find.className('bottom');
this.table = find.className('table');
this.num = find.className('total-num');
this.price = find.className('total-price');
this.tmp = find.className('item');
this.tmp.parentNode.removeChild(this.tmp);//删除模板对应的区域
//var cart = this;//
this.all.onclick = function() {
this.checkAll();
};
}
Cart.prototype = {
/**
* 向购物车中添加商品
* @param {Object} data 商品信息
*/
add: function(data) {
var tmp = this.tmp.cloneNode(true);//克隆元素节点，深拷贝
var item = new Item(tmp, data);//创建购物车的一件商品对象
var cart = this;
// 勾选
item.check.onclick = function () {
cart.updateTotal();
};
// 增加数量
item.add.onclick = function() {
item.num.textContent = ++item.data.num;
item.updateSubtotal()
cart.updateTotal();
};
// 减少数量
item.reduce.onclick = function() {
if (item.data.num > 1) {
item.num.textContent = --item.data.num;
item.updateSubtotal();
cart.updateTotal();
} else {
alert('至少选择1件，如果不需要，请直接删除');
}
};
// 删除商品
item.del.onclick = function() {
if (confirm('您确定要删除此商品吗？')) {
tmp.parentNode.removeChild(tmp);
cart.del(item);
cart.updateTotal();
}
};
// 更新小计
item.updateSubtotal();//默认加载商品和数量产生的小计
// 保存新增的商品对象
this.items.push(item); //存在数组里
// 放入购物车容器中
this.bottom.before(tmp);//列表项存放的位置，在总计之前
},
/**
* 删除保存的商品对象
* @param {Object} item 待删除的商品对象
*/
del: function(item) { //从商品数组对象中将对象删除
for (var i in this.items) {
if (this.items[i] === item) {
delete this.items[i];
}
}
},
/**
* 更新总计
*/
updateTotal: function() {
var num = 0, price = 0;
for (var i in this.items) {
var item = this.items[i];
if (item.check.checked) {
num += item.data.num;
price += item.data.num * item.data.price;
}
}
this.num.textContent = num;
this.price.textContent = price.toFixed(2);
},
/**
* 全选
*/
checkAll: function() {
for (var i in this.items) {
this.items[i].check.checked = true;
}
this.updateTotal();
}
};
/**
* Item 购物车中的单件商品
* @constructor
* @param {String} tmp 模板
* @param {Array} data 数据
*/
function Item(tmp, data) {
var find = new Find(tmp);
this.check = find.className('check');
this.name = find.className('name');
this.price = find.className('price');
this.num = find.className('num');
this.add = find.className('add');
this.reduce = find.className('reduce');
this.subtotal = find.className('subtotal');//小计
this.del = find.className('del');
this.data = data;
this.name.textContent = data.name;
this.price.textContent = data.price.toFixed(2);//Number 四舍五入为指定小数位数的数字
this.num.textContent = data.num;
}
Item.prototype = {
/**
* 更新小计
*/
updateSubtotal: function() {
this.subtotal.textContent = (this.data.num * this.data.price).toFixed(2);
}
};
window['ShopCart'] = ShopCart;
})(window);
