JS 使用节点实现简单购物车数量和金额

一、 购物车中商品数量

 

二、计算金额

 

HTML页面:

	
		
		
		
	
	
		

			

				

					
序号
					
商品名称
					
数量
					
单价
					
小计
				
				

					
1
					
羊肉串
					

						
						
						
					
					
5.00
					
5.00
				
				

					
2
					
草莓奶茶
					

						
						
						
					
					
9.00
					
9.00
				
				

					
3
					
饼干
					

						
						
						
					
					
20.10
					
20.10
				
				

					
4
					
葡萄
					

						
						
						
					
					
8.05
					
8.05
				
				

					

						共计消费:￥42.15 元
				
			
		
	

JS脚本

//add +
var adds = document.getElementsByClassName("add");
//循环
for (var i = 0; i < adds.length; i++) {
	//单击事件
	adds[i].onclick = function() {
		//1.获得输入框对象
		var inputEle = this.previousElementSibling;
		//2.获得原来的值
		var inputValue = inputEle.value;
		//3.重新复制
		inputEle.value = parseInt(inputValue) + 1;
		
		//计算金额
		 //1.数量
		 var number=parseInt(inputEle.value);
		 //2.单价
		  var price =parseFloat(this.parentNode.nextElementSibling.innerHTML);
		  //3.金额
		  var sum  =number*price;
		  
		  //4. 赋值  保留2位小数点==>  toFixed(2)
		  this.parentNode.nextElementSibling.nextElementSibling.innerHTML=sum.toFixed(2);
		
		 //调用方法
		 getAmount();
	}
}


//minus -
var minus = document.getElementsByClassName("minus");
//循环
for (var i = 0; i < minus.length; i++) {
	//单击事件
	minus[i].onclick = function() {
		//1.获得输入框对象
		var inputEle = this.nextElementSibling;
		//2.获得原来的值
		var inputValue = inputEle.value;
		//判断
		if (parseInt(inputValue) > 1) {
			//3.重新复制
			inputEle.value = parseInt(inputValue) - 1;
			
			//计算金额
			 //1.数量
			 var number=parseInt(inputEle.value);
			 //2.单价
			  var price =parseFloat(this.parentNode.nextElementSibling.innerHTML);
			  //3.金额
			  var sum  =number*price;
			  
			  //4. 赋值  保留2位小数点==>  toFixed(2)
			  this.parentNode.nextElementSibling.nextElementSibling.innerHTML=sum.toFixed(2);
			
			//调用方法
			 getAmount();
			
		}else{
			alert("不能再减了!");
		}
	}
}

//计算总金额
function getAmount(){
	//0.累计和
	 var sum=0;
	//1.total
	var totals = document.getElementsByClassName("total");
	//2.循环
	for (var i = 0; i < totals.length; i++) {
		 sum+=parseFloat( totals[i].innerHTML);
	}
	
	//3.赋值
	document.getElementById("sum2").innerHTML=sum.toFixed(2);
}