使用JQuery构建计算器，多个计算的问题

Question

我一直在使用jQuery构建计算器。多次计算后，清除按钮不起作用，进一步的计算会产生不正确的结果。

我希望改进我的解决方案以及纠正我遇到的多个计算问题。

我的片段在下面。

var alpha = 0;
var bravo = 0;
var charlie = 0;

$(document).ready(function(){
	$('#button1').click(function(){
		$('#output').val($(this).val());
	});
	$('#button2').click(function(){
		$('#output').val($(this).val());
	});
	$('#button3').click(function(){
		$('#output').val($(this).val());
	});
	$('#button4').click(function(){
		$('#output').val($(this).val());
	});
	$('#button5').click(function(){
		$('#output').val($(this).val());
	});
	$('#button6').click(function(){
		$('#output').val($(this).val());
	});
	$('#button7').click(function(){
		$('#output').val($(this).val());
	});
	$('#button8').click(function(){
		$('#output').val($(this).val());
	});
	$('#button9').click(function(){
		$('#output').val($(this).val());
	});
	$('#button0').click(function(){
		$('#output').val($(this).val());
	});
	$('#buttonclear').click(function(){
		$('#output').val($(this).val());
	});
});


$(document).ready(function(){
	$('#buttonplus').click(function(){
	  alpha = +$("#output").val();
	  if (alpha >= 0) {
			$('#buttonequals').click(function(){
			bravo = +$("#output").val();
			charlie = alpha+bravo;
			$('#output').val(charlie);
			return;
			 });
	  }
	});
	$('#buttonsubtraction').click(function(){
	 alpha = +$("#output").val();
	 if (alpha >= 0) {
			$('#buttonequals').click(function(){
			bravo = +$("#output").val();
			charlie = alpha-bravo;
			$('#output').val(charlie);
			return;
			 });
	 }
	});
	$('#buttonmultiply').click(function(){
	 alpha = +$("#output").val();
	 if (alpha >= 0) {
			$('#buttonequals').click(function(){
			bravo = +$("#output").val();
			charlie = alpha*bravo;
			$('#output').val(charlie);
			return;
			 });
	 }
	});
	$('#buttondivide').click(function(){
	 alpha = +$("#output").val();
	 if (alpha >= 0) {
			$('#buttonequals').click(function(){
			bravo = +$("#output").val();
			charlie = alpha/bravo;
			$('#output').val(charlie);
			return;
			 });
	  }
	});
	$('#buttonclear').click(function(){
		alpha = 0;
		bravo= 0;
		charlie = 0;
	});
});

<table>
	<tr>
		<td>
		 <input type="text"   id="output"> <!-- NOTE: The id of the textbox is "output" -->
		<br>
		</td>
	</tr>
	<tr>
		<td>
			<input type="button" name="one" value = "1" id="button1"> <!-- 1 -->
			<input type = "button" name = "two" value = "2" id="button2" > <!-- 2 -->
			<input type = "button" name = "three" value = "3" id="button3"> <!-- 3 -->
			<input type = "button" name = "add" value = "+" id="buttonplus"> <!-- + -->
			<br />
			<input type = "button" name = "four" value = "4"id="button4"> <!-- 4 -->
			<input type = "button" name = "five" value = "5" id="button5"> <!-- 5 -->
			<input type = "button" name = "six" value = "6" id="button6"> <!-- 6 -->
			<input type = "button" name = "subtract" value = "-" id="buttonsubtraction"> <!-- - -->
			<br />
			<input type = "button" name = "seven" value = "7" id="button7"> <!-- 7 -->
			<input type = "button" name = "eight" value = "8" id="button8"> <!-- 8 -->
			<input type = "button" name = "nine" value = "9" id="button9"> <!-- 9 -->
			<input type = "button" name = "multiply" value = "x" id="buttonmultiply"> <!-- * -->
			<br />
			<input type = "button" name = "clear" value = "ce" id="buttonclear"> <!-- '' -->
			<input type = "button" name = "zero" value = "0" id="button0"> <!-- 0 -->
			<input type = "button" name = "evaluate" value = " = " id="buttonequals"> 
			<input type = "button" name = "divide" value = "&divide;" id="buttondivide"> <!-- / -->
			<br />
		</td>
	</tr>
</table>

Answer 1

如果您有任何疑问，请与我们联系。我试图让代码保持自我解释。

一些有用的链接：

$("...").data("...")

$("...").on("event", function(){ ... })

未能彻底改进以下版本。

＆＃13;

＆＃13;

test_1.Form1+Film

＆＃13;

var currentAction = "";
var memory = 0;

function Update(x)
{
  if(currentAction == ""){
    memory = x;
    return;
  }
  
  switch(currentAction){
    case "ADD":
      memory += x;
      break;
    case "SUB":
      memory = memory - x;
      break;
    case "MUL":
      memory *= x;
      break;
    case "DIV":
      memory = memory / x;
      break;
    default:
      console.warn("Unknown action: " + currentAction);
      break;
  }
}

$(function(){
  var $el = $("#result");
  
  $(".sel-action").on("click", function(){
    var $this = $(this);
    var input = parseFloat($el.val());
    var action = $this.data("action");
    var clearInput = true;
    switch(action)
    {
      case "CLR":
        memory = 0;
        currentAction = "";
        break;
      case "EQL":
        clearInput = false;
        Update(input);
        $el.val(memory);
        currentAction = "";
        break;
      default:
        Update(input);
        currentAction = action;
    }
    
    if(clearInput)
      $el.val("");
  });
  
  $(".sel-input").on("click", function(){
     $el.val($el.val() + $(this).data("value"));
  });
});

＆＃13;

＆＃13;

＆＃13;

只是一个友好的警告，如果这是偶然的家庭作业教授经常检查stackoverflow解决他们的问题。买家要小心！

Answer 2

$('#buttonclear').click(function(){
    $('#output').val('');
});