最初のものが最初です:英語は私の最初の言語ではなく、トピックに欠陥があるかもしれません。私の謝罪;)ショッピングカートを作る
とにかく、私はjavascriptを使ってウェブショップを作る必要があります。今私はかなりjavascriptに新しいので、私は漠然と私が何をすべきか知っていますが、正確にはわかりません。 テーブルに5つの商品とその価格と5つのボタンを製品ごとに1つのボタンに付けます。 実際のショッピングカートのページの右半分を予約しました。注文した商品がその商品に属するボタンをクリックした後にリストされるはずです。
これは私のコードです:
<!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>
あなたは疑うかもしれませんが、私は正確に機能を使用する方法がわかりません。 また、適切な製品にボタンを割り当てることにいくつか問題があります。
ありがとうございます。 トーマス。
'のonClick(addToCart)' 'のonclick = "addToCart()が"' – Red
は右ああ笑それはかなり新人ミスxDさんのおかげ だそれはまだ動作しませんする必要がありますしかし、私はボタンを押したときに何も起こっていません。 –