Question

我正在尝试使用下拉菜单来处理价格计算表单，但下拉菜单不会为总价格添加任何价格值。我很擅长做这些事情，所以也许你们其中一个人知道如何解决这个问题？

这是代码的link。

HTML：

 <form action="" id="theForm">
    <fieldset>
        <legend>
            Products
        </legend>
        <label>
            <input name="product" value="12.95" type="checkbox" id="p1" onclick="totalIt()"/>
            Extra domein $12.95
        </label>
        <label>
            <input name="product" value="5.99" type="checkbox" id="p2" onclick="totalIt()"/>
            Verlengservice $5.99
        </label>
        <label>
            <input name="product" value="1.99" type="checkbox" id="p3" onclick="totalIt()"/>
            Domein support $1.99
        </label>

        <select name="product" id="p3" onclick="totalIt()"/>
            <option value="249">Thema 'Ambachtelijk'</option>
            <option value="249">Thema 'Blog - Lifestyle'</option>
            <option value="199">Thema 'Bed en Brood'</option>
            <option value="249">Thema 'Freelancer'</option>
        </select>

        <label>
            Total 
            <input value="$0.00" readonly="readonly" type="text" id="total"/>
        </label>
    </fieldset>
    <input value="Submit" type="submit"/>
    <input value="Reset" type="reset"/>
</form>

JavaScript的：

function totalIt() {
var input = document.getElementsByName("product");
var total = 0;
for (var i = 0; i < input.length; i++) {
if (input[i].checked) {
  total += parseFloat(input[i].value);
}
}
document.getElementById("total").value = "$" + total.toFixed(2);
}

有什么想法吗？

Answer 1

您应该使用onchange代替onclick进行选择活动。主要问题是您没有在totalIt func中添加select值。从第3个复选框中选择不同的ID可能是个好主意。

Answer 2

你需要修改你的html，你使用的是像p3一样的id。此外，您需要处理onchange事件。请参阅参考代码：

var dropdownTotal = 0;
        function dropDownTotalHandler() {
            var x = document.getElementById("dropdownProducts").value;
                        
            dropdownTotal += parseFloat(x);
               
            document.getElementById("total").value = "$" + dropdownTotal.toFixed(2);
        }
        function totalIt() {
            var input = document.getElementsByName("product");
            var total = 0;
            for (var i = 0; i < input.length; i++) {
                if (input[i].checked) {
                    total += parseFloat(input[i].value);
                }
            }
            document.getElementById("total").value = "$" + total.toFixed(2);
        }

<form action="" id="theForm">
        <fieldset>
            <legend>
                Products
            </legend>
            <label>
                <input name="product" value="12.95" type="checkbox" id="p1" onclick="totalIt()" />
                Extra domein $12.95
            </label>
            <label>
                <input name="product" value="5.99" type="checkbox" id="p2" onclick="totalIt()" />
                Verlengservice $5.99
            </label>
            <label>
                <input name="product" value="1.99" type="checkbox" id="p3" onclick="totalIt()" />
                Domein support $1.99
            </label>

            <select name="product" id="dropdownProducts" onchange="dropDownTotalHandler()" />
            <option value="249">Thema 'Ambachtelijk'</option>
            <option value="249">Thema 'Blog - Lifestyle'</option>
            <option value="199">Thema 'Bed en Brood'</option>
            <option value="249">Thema 'Freelancer'</option>
            </select>

            <label>
                Total
                <input value="$0.00" readonly="readonly" type="text" id="total" />
            </label>
        </fieldset>
        <input value="Submit" type="submit" />
        <input value="Reset" type="reset" />
    </form>

如果你想让事件处理程序保持一致，那么这就是你如何做到这一点的方法之一。希望这是你想要的，但如果不是随意改变它。首先，将html更改为提及totalIt作为事件处理程序，如下所示：平变化= “totalIt（THIS.VALUE）”

然后修改脚本代码。在这里，一次只能复制一个复选框：

<script>
var total = 0;
    function totalIt(dropDownValue) {
        if (!dropDownValue) {
            total += parseFloat(event.target.value);
        } else {
            total += parseFloat(dropDownValue);
       }
        document.getElementById("total").value = "$" + total.toFixed(2);

    }

 </script>

看看这是否是你要找的？

Answer 3

您需要从<select>

中获取所选值

将onclick更改为onchange

当更改元素的值时会发生onchange事件。

试试这个：

if(input[i].tagName == 'SELECT'){
  total += Number(input[i].options[input[i].selectedIndex].value);
}

function totalIt() {
  var input = document.getElementsByName("product");
  var total = 0;
  for (var i = 0; i < input.length; i++) {
    if(input[i].tagName == 'SELECT'){
      total += Number(input[i].options[input[i].selectedIndex].value);
    }
    if (input[i].checked) {
      total += parseFloat(input[i].value);
    }
  }
  document.getElementById("total").value = "$" + total.toFixed(2);
}

<form action="" id="theForm">
    <fieldset>
        <legend>
            Products
        </legend>
        <label>
            <input name="product" value="12.95" type="checkbox" id="p1" onchange="totalIt()"/>
            Extra domein $12.95
        </label>
        <label>
            <input name="product" value="5.99" type="checkbox" id="p2" onchange="totalIt()"/>
            Verlengservice $5.99
        </label>
        <label>
            <input name="product" value="1.99" type="checkbox" id="p3" onchange="totalIt()"/>
            Domein support $1.99
        </label>

        <select name="product" id="p3" onchange="totalIt()"/>
            <option value="249">Thema 'Ambachtelijk'</option>
            <option value="249">Thema 'Blog - Lifestyle'</option>
            <option value="199">Thema 'Bed en Brood'</option>
            <option value="249">Thema 'Freelancer'</option>
        </select>

        <label>
            Total 
            <input value="$0.00" readonly="readonly" type="text" id="total"/>
        </label>
    </fieldset>
    <input value="Submit" type="submit"/>
    <input value="Reset" type="reset"/>
</form>

下拉菜单中包含HTML / JavaScript价格计算表单

3 个答案: