首先要注意的是:英语不是我的第一语言，我的主题可能存在缺陷。对此我深表歉意；)
无论如何，对于一个学校元素，我必须使用 javascript 创建一个网上商店。现在我对 javascript 很陌生，所以我模糊地知道我应该做什么，但不完全是。 我在一张表中放了五个产品，还有它们的价格和五个按钮，每个产品一个按钮。 我为实际的购物车保留了页面的右半部分，在我点击属于该产品的按钮后应该列出该订购的产品。
这是我的代码:
<!DOCTYPE html>
<html>
<head>
<title>Webshop</title>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
margin-left: 10px;
}
button {
margin: 10px;
}
table {
float: left;
width: 40%;
}
p {
padding: 5px;
padding-left: 20px;
}
#shoppingCartDiv {
border: 1px solid black;
position: absolute;
left: 780px;
width: 50%;
height: 98%;
margin: 5px;
}
</style>
</head>
<body>
<table>
<tr>
<td>Product 1</td>
<td>€ 15</td>
<td><button id="button1" type="button" onClick(addToCart)>Add to cart</button></td>
</tr>
<tr>
<td>Product 2</td>
<td>€ 30</td>
<td><button id="button2" type="button" onClick(addToCart)>Add to cart</button></td>
</tr>
<tr>
<td>Product 3</td>
<td>€ 45</td>
<td><button id="button3" type="button" onClick(addToCart)>Add to cart</button></td>
</tr>
<tr>
<td>Product 4</td>
<td>€ 60</td>
<td><button id="button4" type="button" onClick(addToCart)>Add to cart</button></td>
</tr>
<tr>
<td>Product 5</td>
<td>€ 75</td>
<td><button id="button5" type="button" onClick(addToCart)>Add to cart</button></td>
</tr>
</table>
<div id="shoppingCartDiv">
<p id="shoppingCartP">
<i>Your shopping cart is empty</i>
</p>
</div>
<script>
var shoppingCart;
function addToCart(button) {
var button = button.id;
switch (button) {
case "button1":
if (shoppingCartP == "Your shopping cart is empty") {
shoppingCartP = "Product 1" + "<br />"
} else {
(shoppingCartP = shoppingCartP + "Product 1" + "<br />")
}
}
document.getElementById("shoppingCartP").innerHTML = shoppingCart;
}
</script>
</body>
</html>
您可能会怀疑，我并不完全了解如何使用函数。 此外，我在将按钮分配给正确的产品时遇到了一些问题。
提前致谢:) 托马斯。
最佳答案
<!DOCTYPE html>
<html>
<head>
<title>Webshop</title>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
margin-left: 10px;
}
button {
margin: 10px;
}
table {
float: left;
width: 40%;
}
p {
padding: 5px;
padding-left: 20px;
}
#shoppingCartDiv {
border: 1px solid black;
position: absolute;
left: 780px;
width: 50%;
height: 98%;
margin: 5px;
}
</style>
</head>
<body>
<table>
<tr>
<td>Product 1</td>
<td>€ 15</td>
<td><button id="button1" type="button" onClick="addToCart(this.id);">Add to cart</button></td>
</tr>
<tr>
<td>Product 2</td>
<td>€ 30</td>
<td><button id="button2" type="button" onClick="addToCart(this.id);">Add to cart</button></td>
</tr>
<tr>
<td>Product 3</td>
<td>€ 45</td>
<td><button id="button3" type="button" onClick="addToCart(this.id);">Add to cart</button></td>
</tr>
<tr>
<td>Product 4</td>
<td>€ 60</td>
<td><button id="button4" type="button" onClick="addToCart(this.id);">Add to cart</button></td>
</tr>
<tr>
<td>Product 5</td>
<td>€ 75</td>
<td><button id="button5" type="button" onClick="addToCart(this.id);">Add to cart</button></td>
</tr>
</table>
<div id="shoppingCartDiv">
<p id="shoppingCartP">
</p>
</div>
<script>
window.onload=function()
{
document.getElementById("shoppingCartP").innerHTML = "Your shopping cart is empty";
}
var shoppingCart;
function addToCart(id) {
var id=id;
shoppingCartP=document.getElementById("shoppingCartP").innerHTML;
switch (id) {
case "button1" :
if (shoppingCartP == "Your shopping cart is empty") {
shoppingCart = "Product 1" + "<br>"
}
else if (shoppingCartP.indexOf("Product 1")>-1){
}
else {
(shoppingCart= shoppingCartP + "Product 1" + "<br>")
}
break;
case "button2":
if (shoppingCartP == "Your shopping cart is empty") {
shoppingCart= "Product 2" + "<br />"
}
else if (shoppingCartP.indexOf("Product 2")>-1){
}
else {
(shoppingCart = shoppingCartP + "Product 2" + "<br />")
}
break;
case "button3":
if (shoppingCartP == "Your shopping cart is empty") {
shoppingCart = "Product 3" + "<br />"
}
else if (shoppingCartP.indexOf("Product 3")>-1){
}
else {
(shoppingCart = shoppingCartP + "Product 3" + "<br />")
}
break;
case "button4":
if (shoppingCartP == "Your shopping cart is empty") {
shoppingCart = "Product 4" + "<br />"
}
else if (shoppingCartP.indexOf("Product 4")>-1){
}
else {
(shoppingCart = shoppingCartP + "Product 4" + "<br />")
}
break;
case "button5":
if (shoppingCartP == "Your shopping cart is empty") {
shoppingCart = "Product 5" + "<br />"
}
else if (shoppingCartP.indexOf("Product 5")>-1){
}
else {
(shoppingCart = shoppingCartP + "Product 5" + "<br />")
}
break;
}
document.getElementById("shoppingCartP").innerHTML = shoppingCart;
}
</script>
</body>
</html>关于javascript - 制作购物车，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43915904/