首先要做的事情是：英语不是我的第一语言，我的主题可能存在缺陷。我为此道歉;）
无论如何，对于学校项目，我必须使用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>
正如您可能怀疑的那样，我并不完全知道如何使用功能。 此外，我在将按钮分配到正确的产品时遇到了一些麻烦。
提前致谢:) 托马斯。
答案 0 :(得分：0)
<!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>