Responding to a change trigger handler on button click
<p><a href="http://jsfiddle.net/rockitdev/AS6GB/35/" rel="nofollow">JSFiddle</a></p>

<p>In the following example, if you manually change the text in the text box, you get a different message beneath the text box.</p>

<p>I want the same behaviour if you click one of the buttons (i.e. if you click the button Set as 4) you should see Mid-to-Mod frail appear below the text input.</p>

<p>My HTML</p>

<pre><code>&lt;input type="text" id="total-frailty-score" value="9" /&gt;

&lt;div id="frail-category-area"&gt;
    &lt;div id="frail-category"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;input type="button" id="a" value="Set as 4" /&gt;
&lt;input type="button" id="b" value="Set as 2" /&gt;
&lt;input type="button" id="c" value="Set as 7" /&gt;
</code></pre>

<p>JavaScript/JQuery</p>

<pre><code>$(function () {

function FrailCategory() {

    if ($('#total-frailty-score').val() ==  9) {
        $('#frail-category').text('Terminally')
    } else if ($('#total-frailty-score').val() &gt;=  1 &amp;&amp; $('#total-frailty-score').val() &lt;=  3) {
        $('#frail-category').text('Pre-Frail')
    } else if ($('#total-frailty-score').val() &gt;=  4 &amp;&amp; $('#total-frailty-score').val() &lt;=  6) {
        $('#frail-category').text('Mid-to-Mod frail')
    } else if ($('#total-frailty-score').val() &gt;=  7 &amp;&amp; $('#total-frailty-score').val() &lt;=  8) {
        $('#frail-category').text('Severely frail')
    }
}

    $('#total-frailty-score').change(FrailCategory).triggerHandler("change");

});

$('#a').click(function() {
    $('#total-frailty-score').val('4');
});

$('#b').click(function() {
    $('#total-frailty-score').val('2');
});

$('#c').click(function() {
    $('#total-frailty-score').val('7');
});
</code></pre>
