使用带if else语句的switch切换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');
      });
    }

开关似乎工作正常，因为在button和#mode div中都显示了正确的HTML，但是在两种情况下单击#button-cos都将执行cos函数。 我不知道为什么会这样。 另外，这可能就是这种情况的原因，该按钮的给出方式为：

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

如何更改我的代码以使其正常工作？

Answer 1

您应该只为button-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语句（ if ($("#button-mode").val() === '...') ）。 在这种情况下，您只需添加一次点击处理程序。