数値入力をその合計に基づいて制限する方法

Question

これは私の初めての巨大な量のjavascriptです。これが基本的な質問であれば謝ります。

注文フォームの一部では、人は10種類のピザを注文することができます。あなたはここでのJISTを取得することができます：

<div><h3>Types of Pizzas</h3></div> 
    <div> 
     <input type="checkbox" name="selections" id="pizza1"><label>pizza1</label> 
      <div id="PC1"> 
       <label>How Many?</label><input type="number" min="0" oninput="validity.valid||(value='');" class="pizzaTotal"> 
      </div> 
    </div> 

    <div> 
     <input type="checkbox" name="selections" id="pizza2"><label>pizza2</label> 
      <div id="PC2"> 
       <label>How Many?</label><input type="number" min="0" oninput="validity.valid||(value='');" class="pizzaTotal"> 
      </div> 
    </div> 

    <div> 
     <input type="checkbox" name="selections" id="pizza3"><label>pizza3</label> 
      <div id="PC3"> 
       <label>How Many?</label><input type="number" min="0" oninput="validity.valid||(value='');" class="pizzaTotal"> 
      </div> 
    </div> 

それでは、どのように、のは、人の入力の場合はpizza1の4桁、pizza2の5件の受注、及びpizza3の2桁（11枚のピザ）に入れしようとしているとしましょう送信ボタンを使わずに入力を制限したいのですか？

はあなたに

EDITありがとう：ピザの3種類よりもはるかにあります。これは私が書いたコードのスクリーンショットです。

Answer 1

すべてのドロップダウンボックスにonchangeイベントリスナーを追加できますか？これは3と3の値をチェックする関数を呼び出すことができます。その合計は3番目の入力の最大値になります。 EDIT1：

function maxForm() 
{ 
    var x = parseInt(document.getElementById("pizza1a").value); 
    var y = parseInt(document.getElementById("pizza2a").value); 
    var z = parseInt(document.getElementById("pizza3a").value); 
    var tot = x + y +z; 
    document.getElementById("pizza1a").max = 10-tot; 
    document.getElementById("pizza2a").max = 10-tot; 
    document.getElementById("pizza3a").max = 10-tot; 
} 

EDIT2： 私はそれが働いて得た、それは少し厄介だが、私は、jsfiddleにそれを置くでしょう。とにかく私が作った間違いは、最大値を計算するときに入力値を数えていました。つまり、そのうちの1つに5があった場合、その最大値は10（0 + 0 + 5）と計算され、5を超えないようにしました。

Answer 2

function maxForm() 
 
{ 
 
    var x = parseInt(document.getElementById("pizza1a").value); 
 
    var y = parseInt(document.getElementById("pizza2a").value); 
 
    var z = parseInt(document.getElementById("pizza3a").value); 
 
    if (x>10) 
 
     document.getElementById("pizza1a").value = 10; 
 
    else if (x+y>10) 
 
     document.getElementById("pizza2a").value = 10-x; 
 
    else if (x+y+z>10) 
 
     document.getElementById("pizza3a").value = 10-x-y; 
 
}

<h3>Types of Pizzas</h3> 
 
<form> 
 
    <input type="checkbox" name="selections" id="pizza1"><label>pizza1</label> 
 
      <label>How Many?</label><input type="number" id="pizza1a" min="0" onchange="maxForm();" class="pizzaTotal"><br> 
 
    <input type="checkbox" name="selections" id="pizza2"><label>pizza2</label> 
 
      <label>How Many?</label><input type="number" id="pizza2a" min="0" onchange="maxForm();" class="pizzaTotal"><br> 
 
    <input type="checkbox" name="selections" id="pizza3"><label>pizza3</label> 
 
      <label>How Many?</label><input type="number" id="pizza3a" min="0" onchange="maxForm();" class="pizzaTotal"><br> 
 
</form> 
 
<script src="maxform.js"></script>

これは、値を確認するために必要なHTMLファイルです。私は見つけることができるすべての余分divを取り除いた。次に、上記のjavascriptを同じディレクトリ内の "maxform.js"として使用して、エントリを変更することができます。