更改下拉菜單時調用Javascript函數

我試圖在下拉菜單更改時實現函數調用。我認爲我的問題是我在C++的編程風格中思考得太多。我研究了這個問題，但沒有找到類似的答案。更改下拉菜單時調用Javascript函數

我的代碼如下：

JS：

<script type="text/javascript">   

     var type = 0; 
     var milk = 0; 
     var extra = 0; 

     settype(t) { 
      type = t; 
     } 

     setmilk(m) { 
      milk = m; 
     } 

     setextra(e) { 
      extra = e; 
     } 

     function calculateCalories() { 
      return (type*milk)+extra; 
     } 
     function reset() { 
      type = 0; 
      milk = 0; 
      extra = 0; 
     } 
</script>

HTML：

<table border=4 width=800px> 
<tr> 
<td align=right> 
<h2 style="text-align: left"> Your Coffee Drink: </h2> 
<input type="text" name="Input" size="35" style="text-align: right"/> 
Calories      
</td> 
</tr> 

<td> 
Calculate the calories of your favorite coffee drink! * 
</td> 

<td> 
Select Type: 
    <select id="coffeetypedropdown" onChange="settype(value);"> 
     <option value="">Select a Drink</option> 
     <option value="0">Caffe</option> 
     <option value="1">Caffe Latte</option> 
     <option value="1">Caffe Macchiato</option> 
     <option value="0">Caffe Americano</option> 
     <option value=".5">Cappuccino</option> 
    </select> 
</td> 

<td> 
Select Type of Milk 
    <select id="milkdropdown" onchange="setmilk(value);"> 
     <option value="">Select Type of Milk</option> 
     <option value="80">Nonfat</option> 
     <option value="100">1% Milk</option> 
     <option value="120">2% Milk</option> 
     <option value="150">Whole Milk</option> 
     <option value="130">Soy Milk</option> 
    </select> 

</td> 

<td> 
Select Extra 
    <select id="extradropdown" onchange="setextra(value);"> 
     <option value="">Select Extra</option> 
     <option value="100">Whipped Cream</option> 
     <option value="100">Chocolate Syrup</option> 
     <option value="50">Caramel Syrup</option> 
     <option value="10">Chocolate Powder</option> 
     <option value="100">Heavy Cream</option> 
    </select> 

</td> 


<td> 
<input type="button" name="clear" VALUE="Clear" OnClick="Calc.Input.value = reset();"> 
<input type="button" name="Equals" VALUE="Calculate!" OnClick="Calc.Input.value = eval(calcCalories();)"> 
</td> 



</td>

非常感謝您的幫助。

來源

2014-04-16 AHalbert

嘗試'this.value'而不是'value'。平變化= 「setextra（THIS.VALUE）;」和onchange =「settype（this.value）;」 – Arvind

什麼是'Calc'？ ''onclick'方法中使用的'calcCalories'與您實際函數的名稱'calculateCalories'不匹配。 –

謝謝。這是一個拼寫錯誤（我道歉），@Arvind提到的this.value，並將函數放在setter之前。 – AHalbert

請在函數名前添加函數。

<script> 
    function settype(t) { 
     alert(t); 
    } 
</script>

讓我知道是否有任何顧慮。（您想在全局範圍內添加'settype'功能？ - 與全局變量相同）

來源

2014-04-16 10:19:34

更改下拉菜單時調用Javascript函數

回答

相關問題