Вызов функции Javascript при изменении Dropdown

0

Я попытался реализовать вызов функции, когда выпадающее меню изменилось. Я думаю, что моя проблема в том, что я слишком много думаю о стиле программирования C++. Я исследовал этот вопрос и не нашел подобных ответов.

Мой код выглядит следующим образом:

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>

Огромное спасибо за помощь.

  • 1
    попробуйте 'this.value' вместо просто 'value', например onchange = "setextra (this.value);" и onchange = "settype (this.value);"
  • 1
    Что такое Calc ? И calcCalories у используемых в onclick метод не соответствует имени вашей фактической функции в calculateCalories
Показать ещё 1 комментарий
Теги:

1 ответ

3

Пожалуйста, добавьте функцию перед именем функции.

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

Дайте мне знать, если вы беспокоитесь. (Вы хотите добавить функциональность 'settype' глобально? - то же, что и глобальная переменная)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню