Javascript下拉菜單加入

Question

現在在我的頁面上，您可以選擇添加到購物籃，它會將它們添加到總計中。我試圖改變它，所以你可以選擇1和3，它會將它們加在一起，但我不確定如何改變我的頁面，所以它會這樣做？

當前腳本：

<script> 
    var w = 0 
    var x = 19.99 
    var y = 24.99 

    function total1() 
    { 
     w = w + x 
     document.getElementById('Total').value= w; 
    } 


    function total2() 
    { 
     w = w + y 
     document.getElementById('Total').value= w; 
    } 
</script> 

表來選擇選項，並顯示出來：

<table id="t2"> 
    <tr> 
     <td> 
      <img src="item1.png" alt="Sunset Boulevard T-Shirt Men" style="width:350x;height:250px"> 
     </td> 

     <td> 
      <img src="item2.png" alt="Sunset Boulevard T-Shirt Woman" style="width:350x;height:250px"> 
     </td> 
    </tr> 

    <tr> 
     <td> 
      <p id="price">£19.99</p> 
     </td> 
     <td> 
      <p id="price">£24.99</p> 
     </td> 
    </tr> 

    <tr> 
     <td> 
      <input type="button" value= "Add To Basket" onclick ="total1()"> 
     </td> 

     <td> 
      <input type="button" value= "Add To Basket" onclick ="total2()">    
     </td> 
    </tr> 
</table> 
<br> 

<h3 id="header3"></h3> 

<div id="all"> 
    Basket: <input type="text" id="Total" disabled="disabled"> 
</div> 

Answer 1

不知道這是你在尋找什麼，但你可以簡單地只需添加一個計數到產品數量。

你可以做的另一種選擇是添加一個選擇下拉列表（DDL），在那裏他們選擇他們想要的產品數量，然後將DDL的值乘以選擇項更改的價格。

var w = 0 
var x = 19.99 
var y = 24.99 
var count1 = 0, count2 = 0; 

function total1() { 
    if(count1 < 3){ 
     w = w + x 
     document.getElementById('Total').value= w; 
     count1++; 
    } 
} 

function total2() { 
    if(count1 < 3){ 
     w = w + y 
     document.getElementById('Total').value= w; 
     count2++; 
    } 
} 

Answer 2

我會添加一個select，並在「添加到購物籃」按鈕旁邊有允許的數量的數量。在你的情況，你想1和3之間，所以這是一個簡單的一個：

<select id="select1"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 

的id將是繼同名的第二個框「選擇1」爲第一個框，和「選擇2」（樣您用於功能的慣例）。

然後在total1()和total2()功能，可以輕鬆讀取select的價值和它乘以價格：

w = w + x * document.getElementById("select1").value; 

你可以看到這個JSFiddle或代碼如下：

var w = 0 
 
var x = 19.99 
 
var y = 24.99 
 

 
function total1() 
 
{ 
 
    w = w + x * document.getElementById("select1").value; 
 
    document.getElementById('Total').value= w; 
 
} 
 

 

 
function total2() 
 
{ 
 
    w = w + y * document.getElementById("select2").value;; 
 
    document.getElementById('Total').value= w; 
 
}

<table id="t2"> 
 
    <tr> 
 
     <td> 
 
      <img src="item1.png" alt="Sunset Boulevard T-Shirt Men" style="width:350x;height:20px"> 
 
     </td> 
 
     
 
     <td> 
 
      <img src="item2.png" alt="Sunset Boulevard T-Shirt Woman" style="width:350x;height:20px"> 
 
     </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td> 
 
      <p id="price">£19.99</p> 
 
     </td> 
 

 
     <td> 
 
      <p id="price">£24.99</p> 
 
     </td> 
 
    </tr> 
 
    
 
    <tr> 
 
     <td> 
 
      <select id="select1"> 
 
       <option value="1">1</option> 
 
       <option value="2">2</option> 
 
       <option value="3">3</option> 
 
      </select> 
 
      <input type="button" value= "Add To Basket" onclick ="total1()"> 
 
     </td> 
 
     <td> 
 
      <select id="select2"> 
 
       <option value="1">1</option> 
 
       <option value="2">2</option> 
 
       <option value="3">3</option> 
 
      </select> 
 
      <input type="button" value= "Add To Basket" onclick ="total2()"> 
 
     </td> 
 
    </tr> 
 
</table> 
 
<br> 
 

 
<h3 id="header3"></h3> 
 

 
<div id="all"> 
 
    Basket: <input type="text" id="Total" disabled="disabled" > 
 
</div>