带有HTML/JavaScript价格计算表单的下拉菜单

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

这是代码的第一步

HTML:

产品
额外费用为12.95美元
维伦服务5.99美元
Domein支持$1.99
Thema‘Ambachtelijk’
Thema“博客-生活方式”
Thema“卧床育儿”
Thema“自由职业者”
全部的

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);
}

函数totalIt（）{
var输入=document.getElementsByName（“产品”）；
var合计=0；
对于（变量i=0；i

---

有什么想法吗？

您应该使用

onchange

而不是

onclick

来选择事件。主要问题是没有在

totalIt

func中添加select的值。给“选择”复选框指定与第三个复选框不同的id可能是个好主意。

您需要修改html，您使用的id与p3相同。此外，还需要处理onchange事件。请参阅参考代码：

var-dropdownttotal=0；
函数dropDownTotalHandler（）{
var x=document.getElementById（“dropdownProducts”）.value；
dropdownTotal+=parseFloat（x）；
document.getElementById（“total”）.value=“$”+dropdowntTotal.toFixed（2）；
}
函数totalIt（）{
var输入=document.getElementsByName（“产品”）；
var合计=0；
对于（变量i=0；i

产品
额外费用为12.95美元
维伦服务5.99美元
Domein支持$1.99
Thema‘Ambachtelijk’
Thema“博客-生活方式”
Thema“卧床育儿”
Thema“自由职业者”
全部的

您需要从

并将

onclick

更改为

onchange

当元素的值发生更改时，将发生onchange事件

试试这个：

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

函数totalIt（）{
var输入=document.getElementsByName（“产品”）；
var合计=0；
对于（变量i=0；i

产品
额外费用为12.95美元
维伦服务5.99美元
Domein支持$1.99
Thema‘Ambachtelijk’
Thema“博客-生活方式”
Thema“卧床育儿”
Thema“自由职业者”
全部的

有什么问题吗？到目前为止我只能看到一些代码。。。发生了什么？你预计会发生什么？有控制台错误吗？我有点困惑，当您选择复选框时，您的示例会将其相加。您的选择事件应该是

onchange

，而不是

onclick

。如果您打开codepen链接，您将看到我添加的下拉菜单没有向最终价格添加任何价格值，但是，我在HTML代码中为它添加了值。您没有在

totalIt

函数中添加select的值。在复选框中循环，但不将select的值添加到TOTALL。我认为select不需要其他处理程序函数。您应该能够同时使用totalIt。但如果你这样做了，你需要考虑复选框的值来计算最终的总数。这只是一个参考代码。我可以看到我已经指出的许多其他问题，比如相同的ID。此外，他可能会缓存getElementById调用，而不是在处理程序中计算它们。谢谢！这就是我要找的代码！

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