2017-05-11 18 views
0

最初のものが最初です:英語は私の最初の言語ではなく、トピックに欠陥があるかもしれません。私の謝罪;)ショッピングカートを作る

とにかく、私は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>&euro; 15</td> 
      <td><button id="button1" type="button" onClick(addToCart)>Add to cart</button></td> 
     </tr> 
     <tr> 
      <td>Product 2</td> 
      <td>&euro; 30</td> 
      <td><button id="button2" type="button" onClick(addToCart)>Add to cart</button></td> 
     </tr> 
     <tr> 
      <td>Product 3</td> 
      <td>&euro; 45</td> 
      <td><button id="button3" type="button" onClick(addToCart)>Add to cart</button></td> 
     </tr> 
     <tr> 
      <td>Product 4</td> 
      <td>&euro; 60</td> 
      <td><button id="button4" type="button" onClick(addToCart)>Add to cart</button></td> 
     </tr> 
     <tr> 
      <td>Product 5</td> 
      <td>&euro; 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> 

あなたは疑うかもしれませんが、私は正確に機能を使用する方法がわかりません。 また、適切な製品にボタンを割り当てることにいくつか問題があります。

ありがとうございます。 トーマス。

+1

'のonClick(addToCart)' 'のonclick = "addToCart()が"' – Red

+0

は右ああ笑それはかなり新人ミスxDさんのおかげ だそれはまだ動作しませんする必要がありますしかし、私はボタンを押したときに何も起こっていません。 –

答えて

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>&euro; 15</td> 
 
       <td><button id="button1" type="button" onClick="addToCart(this.id);">Add to cart</button></td> 
 
      </tr> 
 
      <tr> 
 
       <td>Product 2</td> 
 
       <td>&euro; 30</td> 
 
       <td><button id="button2" type="button" onClick="addToCart(this.id);">Add to cart</button></td> 
 
      </tr> 
 
      <tr> 
 
       <td>Product 3</td> 
 
       <td>&euro; 45</td> 
 
       <td><button id="button3" type="button" onClick="addToCart(this.id);">Add to cart</button></td> 
 
      </tr> 
 
      <tr> 
 
       <td>Product 4</td> 
 
       <td>&euro; 60</td> 
 
       <td><button id="button4" type="button" onClick="addToCart(this.id);">Add to cart</button></td> 
 
      </tr> 
 
      <tr> 
 
       <td>Product 5</td> 
 
       <td>&euro; 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; 
 
    \t \t shoppingCartP=document.getElementById("shoppingCartP").innerHTML; 
 
      switch (id) { 
 
       case "button1" : 
 
        if (shoppingCartP == "Your shopping cart is empty") { 
 
         shoppingCart = "Product 1" + "<br>" 
 
        } 
 
    \t \t \t \t else if (shoppingCartP.indexOf("Product 1")>-1){ 
 
    \t \t \t \t } 
 
    \t \t \t \t else { 
 
         (shoppingCart= shoppingCartP + "Product 1" + "<br>") 
 
         } 
 
    \t \t \t \t \t break; 
 
    \t \t \t \t \t case "button2": 
 
        if (shoppingCartP == "Your shopping cart is empty") { 
 
         shoppingCart= "Product 2" + "<br />" 
 
        } 
 
    \t \t \t \t else if (shoppingCartP.indexOf("Product 2")>-1){ 
 
    \t \t \t \t } 
 
    \t \t \t \t else { 
 
         (shoppingCart = shoppingCartP + "Product 2" + "<br />") 
 
         } 
 
    \t \t \t \t \t break; 
 
    \t \t \t \t \t case "button3": 
 
        if (shoppingCartP == "Your shopping cart is empty") { 
 
         shoppingCart = "Product 3" + "<br />" 
 
        } 
 
    \t \t \t \t else if (shoppingCartP.indexOf("Product 3")>-1){ 
 
    \t \t \t \t } 
 
    \t \t \t \t else { 
 
         (shoppingCart = shoppingCartP + "Product 3" + "<br />") 
 
         } 
 
    \t \t \t \t \t break; 
 
    \t \t \t \t \t case "button4": 
 
        if (shoppingCartP == "Your shopping cart is empty") { 
 
         shoppingCart = "Product 4" + "<br />" 
 
        } 
 
    \t \t \t \t else if (shoppingCartP.indexOf("Product 4")>-1){ 
 
    \t \t \t \t } 
 
    \t \t \t \t else { 
 
         (shoppingCart = shoppingCartP + "Product 4" + "<br />") 
 
         } 
 
    \t \t \t \t \t break; 
 
    \t \t \t \t \t case "button5": 
 
        if (shoppingCartP == "Your shopping cart is empty") { 
 
         shoppingCart = "Product 5" + "<br />" 
 
        } 
 
    \t \t \t \t else if (shoppingCartP.indexOf("Product 5")>-1){ 
 
    \t \t \t \t } 
 
    \t \t \t \t else { 
 
         (shoppingCart = shoppingCartP + "Product 5" + "<br />") 
 
         } 
 
    \t \t \t \t \t break; 
 
      } 
 
    
 
      document.getElementById("shoppingCartP").innerHTML = shoppingCart; 
 
     } 
 
    </script> 
 
    </body> 
 
    </html>​

0

はすべてbuttonsのため、ショッピングカート内の製品(複数可)を表示するためのあなたの段落pためevent handlerを使用してみてください。 paragraph例えば

var buttons = document.querySelectorAll('button'); 

for (var i = 0; i < buttons.length; i++) { 
    buttons[i].onclick = addToCart; 
} 

:すべてButtons例えば

var para = document.querySelector('p'); 

カートは空であるかどうかをチェックするために、indexOf()string methodを試してみてください。

if(para.innerHTML.indexOf('empty')>0) { 
    para.innerHTML = ""; // clear the shopping cart first 
} 
para.innerHTML += "Product 1 <br />"; 
+0

まず最初に:あなたの応答に感謝:) しかし、それを行うための他の方法はありますか?私はquerySelectorを使ってその部分を覚えていなかったので、私が既に学んだこと(または単に何かを忘れてしまった)で作業しなければならないと思います。 –

+0

@ThomasKuijpersあなたは 'getElementById'と' button .onclick = addToCart; ' – Edper

関連する問題