為什麼我的這段代碼只有第一行顯示點擊後的結果,點擊其他行的+ 或者 - 數量和價格也都在第一行變化
還有用循環從數據庫得到的gprice(商品價格) 當 選擇多個商品加入購物車時,價格都變成最後選中的那個商品的價格?為什麼沒有得到各自的價格?
這是購物車的代碼
上張效果圖,點擊第二行效果也都顯示在第一行
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page import="Db.Db"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@ page import="java.sql.*"%>
<%@ page import="java.util.Date"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<%
request.setCharacterEncoding("utf-8");
String uaddr = null;
int uid = 0;
String uname = request.getParameter("uname");
String[] strgid = request.getParameterValues("addOrders");
Connection conn = null;
Statement stmt = null;
Statement stmt1 = null;
ResultSet rs = null;
ResultSet rs1 = null;
conn = Db.getconn();
stmt = conn.createStatement();
stmt1 = conn.createStatement();
System.out.println(uname);
rs1 = stmt1.executeQuery("select * from user where uname = '"+ uname + "' ");
if (rs1.next()) {
uaddr = rs1.getString("uaddr");
uid = rs1.getInt("uid");
}
%>
<%
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
String nowTime = sdf.format(new Date());
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>購物車</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
</head>
<body>
<form method="post" action="servlet/AddOrdersServlet" name="numSender">
<input type="hidden" name="uid" value="<%=uid%>">
<input type="hidden" name="uname" value="<%=uname%>">
<input type="hidden" name="oaddr" value="<%=uaddr%>">
<input type="hidden" name="dealtime" value="<%=nowTime%>">
<table border=1 align="center">
<tr>
<td colspan="4" align="center">購物車</td>
</tr>
<tr>
<td align="center">商品</td>
<td align="center">數量</td>
<td align="center" colspan="1">操作</td>
</tr>
<%
for (int i = 0; i < strgid.length; i++) {
int gid = Integer.parseInt(strgid[i]);
rs = stmt.executeQuery("select * from goods where gid =" + gid);
if (rs.next()) {
String strgprice = rs.getString("gprice");
Double p =Double.parseDouble(strgprice);
// System.out.println("p="+p);
%>
<script type="text/javascript">
function jianC() {
var p1 = <%=p%>;
/*定義變量K,用商品數量輸入框裡面的數字賦值*/
var k = document.getElementById("shuru").value;
/*點擊-號按鈕會遞減商品數量*/
document.getElementById("shuru").value--;
/*點擊-號按鈕會遞減商品價格*/
document.getElementById("cost").value = k * p1 - p1 + "元"
if (k <= 1) {
alert("親,商品數量不能小於1!");
shuru.value = 1;
}
if (k <= 99)
p1.innerHTML = "";
}
function adddC() {
var p1 = <%=p%>;
/*點擊+號按鈕會遞加商品數量*/
var f = document.getElementById("shuru").value;
document.getElementById("shuru").value++;
/*點擊+號按鈕會遞加商品價格*/
document.getElementById("cost").value = f * p1 + p1 + "元";
if (f >= 99) {
alert("您所選擇的數量已經到達庫存上限!");
shuru.value = 99;
p1.style.color = "red";
p1.innerHTML = "<p><strong>所選數量已經到達上限!</strong></p>";
} else {
document.getElementById("shuru").value + 1;
}
}
function ok()
{
document.getElementById("district").value=document.numSender.init_num.value ;
}
</script>
<!-- ss -->
<tr>
<td><img src="<%=rs.getString("gpicture")%>"> <%=rs.getString("gname")%></td>
<td><input type="button" id="jian" onClick="jianC()" value="-">
<input id="shuru" name="init_num" class="input_text" type="text" value="0" size="3">
<input type="hidden" id="district" name="district" value="" >
<input type="button" id="addd" onClick="adddC()" value="+"></td>
<td>
<input type="checkbox" name="gid" value="<%=gid %>">
</td>
</tr>
<%
}
}
rs.close();
rs1.close();
stmt.close();
stmt1.close();
conn.close();
%>
<tr>
<td colspan="4" align="center">
總價:<input id="cost" class="input_text" type="text" value="0"
size="3" value="0"></td>
</tr>
<tr>
<td colspan="5" align="center">
<button id="buy_anniu" type="submit">提交</button>
<button type="reset">重置</button>
</td>
</tr>
</table>
</form>
</body>
</html>
將你的script塊放到 for (int i = 0; i < strgid.length; i++) {循環外,要不會生成多個內容相同的script塊,導致函數被定義多次,只有最後一個script塊的定義有效果,覆蓋了前面所有script的定義,你的javascript p1的值值存儲最後一個貨物的值。
你的單價直接在調用函數的時候傳入。。為什麼只有第一行改變,應為你id一樣了。document.getElementById獲取到重名id的話,只去第一個,你的上一個帖子已經和你說過了。。什麼是id,id就是唯一的,不能有重復。你也可以為控件起唯一的id,控件id加上for變量i,id一樣的話你只能通過DOM關系來獲取控件了。
下面是控制id唯一的
<form method="post" action="servlet/AddOrdersServlet" name="numSender">
<input type="hidden" name="uid" value="<%=uid%>">
<input type="hidden" name="uname" value="<%=uname%>">
<input type="hidden" name="oaddr" value="<%=uaddr%>">
<input type="hidden" name="dealtime" value="<%=nowTime%>">
<!-----script放到循環外------->
<script type="text/javascript">
function jianC(i,p1) {
/*定義變量K,用商品數量輸入框裡面的數字賦值*/
var k =document.getElementById("shuru"+i);//獲取數量輸入控件
var v=parseInt(k.value,10);
v--;
/*點擊-號按鈕會遞減商品價格*/
if (v < 1) {
alert("親,商品數量不能小於1!");
return//超限退出
}
k.value=v;
k.setAttribute('sum',v*p1)//將這個物品的小計放到自定義屬性sum中,方便計算總價
setTotal()//重新設置總價錢
}
function adddC(i,p1) {
/*點擊+號按鈕會遞加商品數量*/
var k =document.getElementById("shuru"+i);//獲取數量輸入控件
var v=parseInt(k.value,10);
v++;
if (v > 99) {
alert("您所選擇的數量已經到達庫存上限!");
return//超限退出
}
k.value=v;
k.setAttribute('sum',v*p1)//將這個物品的小計放到自定義屬性sum中,方便計算總價
setTotal()//重新設置總價錢
}
function setTotal(){//設置總價
var o=document.getElementsByName('init_num');//獲取數量輸入框
var sum=0;
for(var i=0;i<o.length;i++)sum+=parseInt(o[i].getAttribute('sum')||0)
document.getElementById("cost").value = sum + "元"
}
function ok()
{
document.getElementById("district").value=document.numSender.init_num.value ;
}
</script>
<table border=1 align="center">
<tr>
<td colspan="4" align="center">購物車</td>
</tr>
<tr>
<td align="center">商品</td>
<td align="center">數量</td>
<td align="center" colspan="1">操作</td>
</tr>
<%
for (int i = 0; i < strgid.length; i++) {
int gid = Integer.parseInt(strgid[i]);
rs = stmt.executeQuery("select * from goods where gid =" + gid);
if (rs.next()) {
String strgprice = rs.getString("gprice");
Double p =Double.parseDouble(strgprice);
// System.out.println("p="+p);
%>
<!-- ss -->
<tr>
<td><img src="<%=rs.getString("gpicture")%>"> <%=rs.getString("gname")%></td>
<td><input type="button" id="jian" onClick="jianC(<%=i%>,<%=p%>)" value="-"><!-----傳入循環i和單價------->
<input id="shuru<%=i%>" name="init_num" class="input_text" type="text" value="0" size="3"><!-----id連接上i變為唯一------->
<input type="hidden" id="district" name="district" value="" >
<input type="button" id="addd" onClick="adddC(<%=i%>,<%=p%>)" value="+"><!-----傳入循環i和單價-------></td>
<td>
<input type="checkbox" name="gid" value="<%=gid %>">
</td>
</tr>
<%
}
}
rs.close();
rs1.close();
stmt.close();
stmt1.close();
conn.close();
%>
<tr>
<td colspan="4" align="center">
總價:<input id="cost" class="input_text" type="text" value="0"
size="3" value="0"></td>
</tr>
<tr>
<td colspan="5" align="center">
<button id="buy_anniu" type="submit">提交</button>
<button type="reset">重置</button>
</td>
</tr>
</table>
</form>