javascript - Trying to display a value when the select list option changes with onchange -

javascript - Trying to display a value when the select list option changes with onchange -

what i'm trying this: when job selected drop-down list, want populate hourlyrate field in totals table amount. dropdown list:

<fieldset> <legend>what position?</legend> <select name="job" id="job"> <option value="job0">please select position:</option> <option value="job1">server/bartender</option> <option value="job2">greeter/busser</option> <option value="job3">kitchen support</option> </select> </fieldset>

this totals table:

<div id="totals"> <table width="408"> <tr> <td width="214">hourly rate:</td><td width="57" id="hourlyrate"></td></tr> </table> </div>

this javascript:

var $ = function (id) { homecoming document.getelementbyid(id); } function ratechange () { var rate=""; if ($('job').value == 'job0') { rate = '0'; } if ($('job').value == 'job1') { rate = '12'; } if ($('job').value == 'job2') { rate = '10'; } if ($('job').value == 'job3') { rate = '11'; } $('hourlyrate').innerhtml = "$ " + rate; } window.onload = function () { $('job').onchange = ratechange(); }

so if selects server/bartender dropdown list, want hourlyrate field in totals table display $12. cannot figure out doing wrong!

it looks you're calling function straight away, instead of telling called on onchange event:

$('job').onchange = ratechange();

so homecoming value of ratechange (nothing) assigned onchange event.

try this:

$('job').onchange = ratechange;

now ratechange function function run when onchange event fires.

javascript onchange