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にはありませんが、私のWebサイトでは正常に機能します）。ただし、必要なので、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 に答える