问题描述
- 为什么我的这段代码只有第一行显示点击后的结果
-
为什么我的这段代码只有第一行显示点击后的结果,点击其他行的+ 或者 - 数量和价格也都在第一行变化
还有用循环从数据库得到的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>
时间: 2024-11-02 22:27:48