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都会执行{{1}功能。我不知道为什么会这样。此外，这可能是发生这种情况的原因，按钮由：

给出

cos

如何更改代码才能使其正常工作？

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() === '...')）。在这种情况下，您只需要添加一次点击处理程序。

使用带有if else语句的开关来切换JavaScript计算器模式

2 个答案: