我的目标-单击按钮,获取产品价值,添加到购物车。
我有一个html页面,我想在其中单击一个按钮并获取productId值,以获取该值,然后将其插入购物车。 每次页面加载时,我都希望从数据库中获取要添加到购物车中的记录
问题是,当我按下按钮时,即使使用ID连接它,我也只会得到第一条记录,而且看来按钮根本没有连接到表。
代码如下:
<!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 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>
<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}">
<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><button onclick="myfunction()" class="btn-select" type="button" id="buttonc">Add to cart</button></td>
</tr>
</table>
<script>
function myfunction() {
alert(document.getElementById("productId").outerText);
}
</script>
</body>
</html>
答案 0 :(得分:1)
您所有的按钮都将调用相同的功能,因此您无法确定应将哪种产品添加到购物车。您应该为按钮提供一个data-productid
之类的数据属性,并将其作为参数传递给函数(this.dataset.productid
),以获取应添加到购物车的产品ID。您还应该为其中一个表格单元格提供产品ID的ID,并使用document.getElementById(productid).parentNode
获取行。
此外,HTML还会出现一些语法错误,例如正文和两个末尾</head>
标记之前有HTML(标头)。
<!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 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;
}
}
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>
<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>
<h2>Search Results</h2>
<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}">
<td th:text="${product.productId}" id="${product.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><button onclick="myfunction(this.dataset.productid)" class="btn-select" type="button" data-productid="${product.productId}">Add to cart</button></td>
</tr>
</table>
<script>
function myfunction(productId) {
alert(productId);
var row = document.getElementById(productId).parentNode;
console.log(row);
}
</script>
</body>
</html>
答案 1 :(得分:0)
调用javascript函数myfunction($ {product.productId})并更改javascript函数myfunction(id){}时,请尝试以下操作
答案 2 :(得分:0)
问题在于您所有的按钮都将调用myfunction
,并且仅获取第一个productId并使用该externalText,而不表示实际单击了哪个按钮。
您可以将参数传递到myfunction
中,例如productId
,也可以从点击处理程序内部使用事件对象https://developer.mozilla.org/en-US/docs/Web/API/Event,计算出点击后的内容那个。
我还建议您避免为此目的使用ID,因为ID在页面上是唯一的。
让我知道您是否需要更多具体帮助!