1

我遇到了一个问题。代码在这里：

// JavaScript Document

window.totalIt= function() {
  var input = document.getElementsByName("product");
  var total = 0;
  for (var i = 0; i < input.length; i++) {
    if (input[i].checked) {
      total += 1;
    }
  }
  if(total>=3){
    document.getElementById("total").value = "$" + (total*29).toFixed(2);
  }
  else{
    document.getElementById("total").value = "$" + (total*39).toFixed(2);
  }
}

window.totalPrisDessert= function() {
  var input = document.getElementsByName("dessert");
  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);
}
<div id="formular">
  <div id="formulartekst">
    <form>

      <h2 class="formskrift">Order Hot Food</h2>
      <p class="kroner">$39 / $29 when 3 or more checked</p>
      <input name="product" value="39" type="checkbox" id="p1" onclick="totalIt()" /> Monday
      <br>
      <input name="product" value="39" type="checkbox" id="p2" onclick="totalIt()" /> Tuesday
      <br>
      <input name="product" value="39" type="checkbox" id="p3" onclick="totalIt()" /> Wednesday
      <br>
      <input name="product" value="39" type="checkbox" id="p4" onclick="totalIt()" /> Thursday
      <br>
      <input name="product" value="39" type="checkbox" id="p5" onclick="totalIt()" /> Friday

      <h2 class="formskrift">Dessert</h2>
      <p class="kroner">$20 ALWAYS</p>
      <input name="dessert" value="20" type="checkbox" id="p6" onclick="totalPrisDessert()"/>
      Monday<br>
      <input name="dessert" value="20" type="checkbox" id="p7" onclick="totalPrisDessert()"/>
      Tuesday<br>
      <input name="dessert" value="20" type="checkbox" id="p8" onclick="totalPrisDessert()"/>
      Wednesday<br>
      <input name="dessert" value="20" type="checkbox" id="p9" onclick="totalPrisDessert()"/>
      Thursday<br>
      <input name="dessert" value="20" type="checkbox" id="p10" onclick="totalPrisDessert()"/>
      Friday<br>

      <label>
        <br> Total
        <input value="$0.00" readonly type="text" id="total" />
      </label>
      <input type="submit" value="Order">
    </form>
  </div>
</div>

https://jsfiddle.net/u0y7aoct/2/

当我检查前 5 个方框时，他们会将价格添加到总方框中。但是，如果我选中以下 5 个框（甜点）中的任何一个，价格就会被覆盖。我需要显示总价格，但现在它们的作用是两个不同的。

谢谢

4

3 回答 3

0

试试这个更新的小提琴

基本上，创建一个共同的方法来完成两者的总和

window.totalAll = function()
{
  document.getElementById("total").value = (totalIt() + totalPrisDessert()).toFixed(2) ;
}
于 2016-03-03T12:13:55.427 回答
0

您不需要调用两个不同的函数，您可以通过调用相同的函数来添加两个值，只需要检查一个条件是产品还是甜点。

var grndTotal = 0;
var total1 = 0;
var total2 = 0;

window.totalIt= function(name) {
  if(name == "product"){

  var input = document.getElementsByName("product");
  var total = 0;
      for (var i = 0; i < input.length; i++) {
        if (input[i].checked) {
          total += 1;
        }
      }
  if(total>=3){ total1 =  (total*29).toFixed(2);}
  else{total1 =  (total*39).toFixed(2);}
  }

if(name == "dessert"){

  var input = document.getElementsByName("dessert");
  var total = 0;
  for (var i = 0; i < input.length; i++) {
    if (input[i].checked) {
      total += parseFloat(input[i].value);
    }
  }

  total2 =  total.toFixed(2);
  }
  grndTotal = parseInt(total2) + parseInt(total1);
  document.getElementById("total").value = "$"+grndTotal ;

}

这是正常工作的更新功能。

https://jsfiddle.net/VijayDhanvai/hd103j4a/

于 2016-03-03T12:44:38.607 回答
0

只是因为你是这样编程的。您为每个案例制作了两个不同的功能，这些功能分别起作用。你期待什么？:)

你需要更多这样的东西：

window.totalIt = function() {
  var input = document.getElementsByName("product");
  var total = 0;
    var count = 0;
  for (var i = 0; i < input.length; i++) {
    if (input[i].checked) {
      count += 1;
    }   
  }   
  if(count >= 3){ 
    total = count * 29; 
  } else {
    total = count * 39; 
  }   
  return total;
}   

window.totalPrisDessert = function() {
  var input = document.getElementsByName("dessert");
  var total = 0;
  for (var i = 0; i < input.length; i++) {
    if (input[i].checked) {
      total += parseFloat(input[i].value);
    }   
  }   
  return total;
}   

window.grandTotal = function() {
  var total = totalIt() + totalPrisDessert();
  document.getElementById("total").value = "$" + total.toFixed(2);
}

当然，grandTotal()在您的 html 中使用新功能。

于 2016-03-03T13:16:48.040 回答