スイッチケースでオプション計算を選択

Question

私がしようとしているのは、ドロップダウンメニューを持っています。この場合はオプションを選択します.2本のjwWhiskyが必要です。私はそれからjsに行き、スイッチのケースにボトルの価格を入力させ、私が望むボトルでそれを掛けるようにします。

HTML：

function calculate() { 
 
    "use strict" 
 
    var myBox1 = document.getElementById('drinks1Num').value; 
 
    var myBox2 = document.getElementById('drinks1Type').value; 
 
    var result = document.getElementById('result'); 
 
    var myResult = myBox1 * myBox2; 
 
    var inputCost = 0; 
 
    switch (myBox2) { 
 
    case 'jwWhisky': 
 
     inputCost = 49; 
 
     break 
 
     //default: 
 
     // \t alert ("You haven't coded this yet"); 
 
    } 
 

 
    result.value = myResult; 
 
}

<legend> 
 
    Sprits Option 
 
</legend> 
 
<select id="drinks1Num" onchange="calculate()"> 
 
    <option value="0">--- Select ---</option> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
</select> 
 

 
<select id="drinks1Type" onchange="calculate()"> 
 
    <option value="0">--- Select ---</option> 
 
    <option disabled="disabled"></option> 
 
    <optgroup label="whisky"> 
 
    <option value="jwWhisky">Johnnie Walker 700ml</option>49$ 
 
    </optgroup> 
 
</select> 
 
<input id="result" />

Answer 1

あなたは自分のスイッチした後にmyBox1 * inputCostの計算を移動する必要があります。

function calculate() { 
 
     "use strict" 
 
     var myBox1 = document.getElementById('drinks1Num').value; 
 
     var myBox2 = document.getElementById('drinks1Type').value; 
 
     var result = document.getElementById('result'); 
 
     var inputCost=0; 
 
    
 
     switch (myBox2) { 
 
      case 'jwWhisky': 
 
       inputCost=49; 
 
       break 
 
      //default: 
 
      // alert ("You haven't coded this yet"); 
 
     } 
 

 
     result.value = myBox1 * inputCost; 
 
}

<select id="drinks1Num" onchange="calculate()"> 
 
    <option value="0">--- Select ---</option> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
</select> 
 

 
<select id="drinks1Type" onchange="calculate()"> 
 
    <option value="0">--- Select ---</option> 
 
    <option disabled="disabled"></option> 
 
    <optgroup label="whisky"> 
 
    <option value="jwWhisky">Johnnie Walker 700ml</option>49$ 
 
    </optgroup> 
 
</select> 
 
<input id="result" "/>

（あなたが見ることができるようにまた、あなたが本当にすべてでmyResult変数は必要ありません。）それは続けるだろうとして、おそらく、単に各オプション要素のdata-属性としての価格を格納するためのよりよいだろうと

注意製品情報をHTML内の1か所にまとめて、JS switch文は必要ありません。 EDIT - 1つ以上のdata-属性を使用すると、フォームにサブミットされないが、JS内の計算に使用できる追加情報を追加することができますが、value属性は引き続き製品コードに使用できます提出された）。おそらく、このような何か：私の答えでは第二版では、私がいることを移動したので

function calculate() { 
 
    "use strict"; 
 
    var num = document.getElementById('drinks1Num').value; 
 
     
 
    var drinkType = document.getElementById('drinks1Type'); 
 
    var unitCost = drinkType.options[drinkType.selectedIndex].getAttribute('data-cost'); 
 

 
    document.getElementById('result').value = num * unitCost; 
 
}

<select id="drinks1Num" onchange="calculate()"> 
 
    <option value="0">--- Select ---</option> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
</select> 
 

 
<select id="drinks1Type" onchange="calculate()"> 
 
    <option value="0">--- Select ---</option> 
 
    <option disabled="disabled"></option> 
 
    <optgroup label="whisky"> 
 
    <option value="jwWhisky" data-cost="49">Johnnie Walker 700ml ($49)</option> 
 
    <option value="something" data-cost="22">Something else ($22)</option> 
 
    </optgroup> 
 
</select> 
 
<input id="result" "/>

は（ということにも注意してください、あなたの元のHTMLにあなたは、後49$に終了</option>タグを持っていました）