Использование switch with if else для переключения режима калькулятора JavaScript

Question

У меня есть калькулятор JavaScript с кнопкой режима, которая должна переключаться между режимами радиана и градуса через переключатель. Если значение кнопки либо DEG или RAD, нажав на кнопку косинуса будет выполнять либо cos функцию или функцию cosDeg (см):

$('#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'); 
     }); 
    } 

переключатель, кажется, работает хорошо в том, что правильно HTML появляется как в button, так и в #mode div, но нажатие на #button-cos в любом случае выполняет функцию cos. Я не понимаю, почему это происходит. Кроме того, и это может быть, почему это происходит, кнопка задается:

<button TYPE="button" ID="button-mode" value="DEG">Deg</button> 

Как я могу изменить свой код, чтобы получить эту работу должным образом?

Answer 1

Вы должны определить только один обработчик для события click-cos click и определить правильную функцию для вызова внутри этой функции.

$('#button-cos').click(function() { 
    if (checkNum(this.form.display.value)) { 
     if($("#button-mode").val() === 'DEG'){ 
      cosDeg(this.form); 
     } else{ 
      cos(this.form); 
     } 
     $('#disp').addClass("result"); 
    }  
}); 

Answer 2

Проблема заключается в том, что вы добавляете новые прослушиватели событий, но не удаляете ранее добавленные, поэтому выполняются оба обработчика кликов.

Вы можете использовать document.getElementById('button-cos').onclick=function() {...} вместо $('#button-cos').click(function() {...}, он удалит предыдущий обработчик и добавит новый. Но также кажется, что код не добавляет событий после нажатия button-mode.

Итак, гораздо лучше перемещать, если операторы (if ($("#button-mode").val() === '...')) внутри обработчика событий. В этом случае вам нужно будет добавить обработчик кликов только один раз.