Using switch with if else statement to toggle JavaScript calculator mode
<p>I have a JavaScript calculator with a mode button that is supposed to toggle between radian and degree mode via a switch. If the value of the button is either <code>DEG</code> or <code>RAD</code>, clicking on the cosine button will execute either the <code>cos</code> function or the <code>cosDeg</code> function (see below):</p>

<pre><code>$('#button-mode').click(function() {

  var type = $(this).val(),
      $div = $('#mode');

        switch (type) {
        case 'DEG':
            $div.html('DEG');
            $('#button-mode').html('Rad');
            $('#button-mode').val('RAD');     
            break;

        case 'RAD':
            $div.html('RAD');                
            $('#button-mode').html('Deg');
            $('#button-mode').val('DEG');           
            break;
                }

});

if ($("#button-mode").val() === 'DEG') {
    $('#button-cos').click(function() {
    if (checkNum(this.form.display.value)) {
        cos(this.form);
      $('#disp').addClass("result");
      }
      console.log('cos');
      });
    }
else if ($("#button-mode").val() === 'RAD') {
    $('#button-cos').click(function() {
    if (checkNum(this.form.display.value)) {
        cosDeg(this.form);
      $('#disp').addClass("result");
      }
      console.log('cosDeg');
      });
    }
</code></pre>

<p>The switch seems to be working fine in that the correct HTML appears in both the <code>button</code> and the <code>#mode</code> div, but clicking on <code>#button-cos</code> in either case executes the <code>cos</code> function. I am at a loss as for why this happens.
Also, and this may be why this is happening, the button is given by:</p>

<pre><code>&lt;button TYPE="button" ID="button-mode" value="DEG"&gt;Deg&lt;/button&gt;
</code></pre>

<p>How can I change my code to get this working properly?</p>