1

我正在做一个项目(学校),需要有关 javascript 编程的帮助。代码可以在这里看到:https ://jsfiddle.net/zvov1jpr/3/

HTML:

<script src="java.js"></script>
<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
  <label>
    <br> Total
    <input value="$0.00" readonly type="text" id="total" />
  </label>
  <input type="submit" value="Order">
</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);
}

当我选中复选框时,它会自动增加价格(出于某种原因,它不在 jsfiddle 上,但在我的网站上运行良好)。但是,我需要它,所以当我选中 3 个或更多框时,它必须将价格更改为 29 美元。支票而不是 39 美元。

谢谢你。

4

2 回答 2

1

我已经评论过一个小的 JSFiddle 问题。

除此之外,您可以使用 querySelectors 来减少代码。

JSFiddle

function totalIt() {
  var input = document.querySelectorAll("input[name='product']:checked")
  document.getElementById("total").value = "$" +
    (input.length * (input.length > 2 ? 29 : 39))
}
<script src="java.js"></script>
<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
      <label>
        <br>Total
        <input value="$0.00" readonly type="text" id="total" />
      </label>
      <input type="submit" value="Order">
    </form>
  </div>
</div>

于 2016-03-03T10:58:21.360 回答
0

将您的功能更改为:

function totalIt(){

   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);
   }
于 2016-03-03T10:49:18.440 回答