Question

现在，在我的页面上，您可以选择添加到购物篮，它将在总计中添加它们。我正在尝试更改它，以便您可以在1到3之间进行选择，它会将它们添加到总数中，但我不确定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为“select1”，第二个框为“select2”（遵循与函数相同的名称约定）。

然后在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>

Javascript下拉菜单添加

2 个答案: