使用带有 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');
      });
    }

开关似乎工作正常，因为正确的 HTML 出现在 button 和 #mode div 中，但单击 #button-cos 在任何一种情况下都执行 cos 函数。我不知道为什么会这样。此外，这可能就是发生这种情况的原因，按钮由以下方式给出：

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

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

Answer 1

您应该只为 button-cos 单击事件定义一个处理程序，并确定要在该函数内部调用的正确函数。

$('#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 语句的 switch 来切换 JavaScript 计算器模式

Using switch with if else statement to toggle JavaScript calculator mode

javascript

jquery

if-statement

switch-statement