Javascript Раскрывающееся меню Дополнение

Question

прямо сейчас на моей странице вы можете выбрать корзину, и это добавит их в общей сложности. Я пытаюсь изменить его, чтобы вы могли выбирать между 1 и 3, и это добавит их вместе в общей сумме, но im unsure h = о том, как изменить мою страницу, чтобы она это сделала?

Текущий Сценарий:

<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>