Calling Javascript Function when Dropdown is changed

Question

I have attempted to implement a function call when a dropdown menu is changed. I think my problem is I am thinking too much in the programming style of C++. I have researched the question and have not found any similar answers.

My code is as follows:

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>

Thank you very much for the help.

try 'this.value' instead of just 'value' e.g. onchange="setextra(this.value);" and onchange="settype(this.value);" — user2575725
– user2575725, Commented Apr 16, 2014 at 10:19
What is Calc? And calcCalories u used in onclick method does not match your actual function's name calculateCalories — Batu.Khan
– Batu.Khan, Commented Apr 16, 2014 at 10:21
Thank you. It was a combination of misspelling (I apologize), the this.value mentioned by @Arvind, and placing function before the setters. — scoots
– scoots, Commented Apr 16, 2014 at 10:26

Jayesh Goyani · Accepted Answer · 2014-04-16 10:19:34Z

3

Please add function before function name.

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

Let me know if any concern. (You want to add 'settype' functional globally? - same as global variable)

answered Apr 16, 2014 at 10:19

Jayesh Goyani

11.2k11 gold badges32 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Calling Javascript Function when Dropdown is changed

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related