javascript - javascript-尝试添加产品数量时,添加到购物车功能不起作用
问题描述
在我的网页上,我正在尝试创建功能,授予用户将产品添加到购物车的选项。我成功地允许他添加产品,但是当我尝试从用户那里获得关于他想要的数量的输入时,我失败了。
这是java脚本代码,以及相关的html - 问题 - 该函数只返回第一个按钮的值,而不是相关按钮的值。
以下代码仅返回表的第一个值。当客户选择第二个产品时,代码不返回任何内容,或者再次返回第一个产品。
我附上了屏幕截图及其外观。很抱歉代码很长,如果我没有包含所有的 css,屏幕看起来就不一样了。 我尝试制作的相关行是数字 169。
<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #e9e9e9;
}
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav .proceed {
float: right;
display: block;
color: white;
background-color: #2196F3;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #2196F3;
color: white;
}
.topnav .search-container {
float: right;
}
.topnav input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
.topnav .search-container button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.topnav .search-container button:hover {
background: #ccc;
}
@media screen and (max-width: 600px) {
.topnav .search-container {
float: none;
}
.topnav a, .topnav input[type=text], .topnav .search-container button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.topnav input[type=text] {
border: 1px solid #ccc;
}
}
</style>
</head>
<div class="topnav">
<a class="active" href="/search">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
<div class="search-container">
<form action="/results">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
<div style="padding-left:16px">
</div>
<style>
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
th, td {
text-align: left;
padding: 16px;
}
tr:nth-child(even) {
background-color: #f2f2f2
}
</style>
</head>
<body>
<h2>Search Results</h2>
<div class="topnav">
<a class="proceed" href="/cart">Proceed to checkout</a></div>
<table id="products">
<tr>
<th>Product ID</th>
<th>Name</th>
<th>Brand</th>
<th>Rating</th>
<th>Price</th>
<th>Availability</th>
<tr th:each="product : ${results}" class="product">
<td th:text="${product.productId}" id="productId"></td>
<td th:text="${product.productName}"></td>
<td th:text="${product.brand}"></td>
<td th:text="${product.rating}"></td>
<td th:text="${product.price}"></td>
<td th:text="${product.availableInStock}"></td>
<td><input type="text" placeholder="insert quantity" id="quantity" required></td>
<td><button onclick="myfunction(this)" class="${product.productId}" type="button">Add to cart</button></td>
<td><button onclick="myfunction1(this)" class="${product.productId}" type="button">Delete from cart</button></td></tr>
</table>
<script type="text/javascript">
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function myfunction(btn) {
var quan = document.getElementById("quantity").value;
var productid = btn.closest(".product").innerText.split("\t")[0];
var clientid = getCookie("clientidcookie");
var xhttp = new XMLHttpRequest();
xhttp.open("GET","/products_log" + '?user=' + clientid + '&product=' + productid + '&quant=' + quan,true);
xhttp.send();
alert("Product added to cart");
}
function myfunction1(btn) {
var productid = btn.closest(".product").innerText.split("\t")[0];
var clientid = getCookie("clientidcookie");
var xhttp = new XMLHttpRequest();
xhttp.open("GET","/delete_log" + '?user=' + clientid + '&product=' + productid,true);
xhttp.send();
}
</script>
</body>
</html>
编辑:编写以下代码后错误消失了 -
var quan = btn.closest("tr").getElementsByClassName("quantity")[0].value;
代替:
var quan = document.getElementById("quantity").value;
解决方案
元素的 id 应该是唯一的,因此当您使用 时document.getElementById(...)
,您只会获得具有该 id 的第一个元素。
你可以这样做 -
var quan = this.closest('tr').getElementById("quantity").value;
但正如我提到的,id 是唯一的,所以你最好使用 class 代替。
推荐阅读
- python - 在讲话前从文本中删除换行符
- php - laravel 使用多个 whereIn 从表中过滤掉一个产品
- node.js - 错误:无法在视图目录中查找视图“/packages”
- java - 我的 InfoContributor 没有向 Actuator 端点发送信息
- javascript - 状态未定义 no-undef ReactJS?
- laravel - 拉拉维尔 5.6。嘲讽。属性上的模拟方法
- java - 无法将蓝牙设备列为列表
- java - 如何进行Junit测试
- laravel - 如何计算视频在 Laravel 中被点击的次数
- android - 如何将 Google Assistant SDK(库组件)与 Android 设备集成