Javascript 用户界面计算器答案

【问题标题】：Javascript UI CalculatorJavascript 用户界面计算器
【发布时间】：2016-02-16 07:11:51
【问题描述】：

我正在尝试制作一个带有 HTML 和 Javascript 用户界面的计算器。我已经修复了很多错误，但仍然存在以下问题：如果第二个运算符超过一位，则答案错误，除法不起作用。我还很新，我知道我的代码效率低下而且 300 行太长，但是有人可以幽默我并解释我的错误吗？

var resultline_str = " ";
			var multidigit = 0
			var space = 0
			var operating = [];
			
			function type1(){
				resultline_str += " 1";
				document.getElementById('result').innerHTML = resultline_str;
				if(multidigit === 0){
					operating.push(1);
					multidigit = 1;
				}else{
					if(space === 0){
						var n = operating[0]
						n = operating[0].toString();
						n += '1';
						n = parseInt(n);
						operating[0] = n;
					}else{
						var n = operating[2]
						n = operating[2].toString();
						n += '1';
						n = parseInt(n);
						operating[2] = n;
					};
				};
			};
			
			function type2(){
				resultline_str += " 2";
				document.getElementById('result').innerHTML = resultline_str;
				if(multidigit === 0){
					operating.push(2);
					multidigit = 1;
				}else{
					if(space === 0){
						var n = operating[0]
						n = operating[0].toString();
						n += '2';
						n = parseInt(n);
						operating[0] = n;
					}else{
						var n = operating[2]
						n = operating[2].toString();
						n += '2';
						n = parseInt(n);
						operating[2] = n;
					};
				};
			};
			
			function type3(){
				resultline_str += " 3";
				document.getElementById('result').innerHTML = resultline_str;
				if(multidigit === 0){
					operating.push(3);
					multidigit = 1;
				}else{
					if(space === 0){
						var n = operating[0]
						n = operating[0].toString();
						n += '3';
						n = parseInt(n);
						operating[0] = n;
					}else{
						var n = operating[2]
						n = operating[2].toString();
						n += '3';
						n = parseInt(n);
						operating[2] = n;
					};
				};
			};
			
			function type4(){
				resultline_str += " 4";
				document.getElementById('result').innerHTML = resultline_str;
				if(multidigit === 0){
					operating.push(4);
					multidigit = 1;
				}else{
					if(space === 0){
						var n = operating[0]
						n = operating[0].toString();
						n += '4';
						n = parseInt(n);
						operating[0] = n;
					}else{
						var n = operating[2]
						n = operating[2].toString();
						n += '4';
						n = parseInt(n);
						operating[2] = n;
					};
				};
			};
			
			function type5(){
				resultline_str += " 5";
				document.getElementById('result').innerHTML = resultline_str;
				if(multidigit === 0){
					operating.push(5);
					multidigit = 1;
				}else{
					if(space === 0){
						var n = operating[0]
						n = operating[0].toString();
						n += '5';
						n = parseInt(n);
						operating[0] = n;
					}else{
						var n = operating[2]
						n = operating[2].toString();
						n += '5';
						n = parseInt(n);
						operating[2] = n;
					};
				};
			};
			
			function type6(){
				resultline_str += " 6";
				document.getElementById('result').innerHTML = resultline_str;
				if(multidigit === 0){
					operating.push(6);
					multidigit = 1;
				}else{
					if(space === 0){
						var n = operating[0]
						n = operating[0].toString();
						n += '6';
						n = parseInt(n);
						operating[0] = n;
					}else{
						var n = operating[2]
						n = operating[2].toString();
						n += '6';
						n = parseInt(n);
						operating[2] = n;
					};
				};
			};
			
			function type7(){
				resultline_str += " 7";
				document.getElementById('result').innerHTML = resultline_str;
				if(multidigit === 0){
					operating.push(7);
					multidigit = 1;
				}else{
					if(space === 0){
						var n = operating[0]
						n = operating[0].toString();
						n += '7';
						n = parseInt(n);
						operating[0] = n;
					}else{
						var n = operating[2]
						n = operating[2].toString();
						n += '7';
						n = parseInt(n);
						operating[2] = n;
					};
				};
			};
			
			function type8(){
				resultline_str += " 8";
				document.getElementById('result').innerHTML = resultline_str;
				if(multidigit === 0){
					operating.push(8);
					multidigit = 1;
				}else{
					if(space === 0){
						var n = operating[0]
						n = operating[0].toString();
						n += '8';
						n = parseInt(n);
						operating[0] = n;
					}else{
						var n = operating[2]
						n = operating[2].toString();
						n += '8';
						n = parseInt(n);
						operating[2] = n;
					};
				};
			};
			function type9(){
				resultline_str += " 9";
				document.getElementById('result').innerHTML = resultline_str;
				if(multidigit === 0){
					operating.push(9);
					multidigit = 1;
				}else{
					if(space === 0){
						var n = operating[0]
						n = operating[0].toString();
						n += '9';
						n = parseInt(n);
						operating[0] = n;
					}else{
						var n = operating[2]
						n = operating[2].toString();
						n += '9';
						n = parseInt(n);
						operating[2] = n;
					};
				};
			};
			function type_plus(){
				resultline_str += " +";
				document.getElementById('result').innerHTML = resultline_str;
				operating.push('+');
				multidigit = 0;
				place = 2;
			};
			
			function type_minus(){
				resultline_str += " -";
				document.getElementById('result').innerHTML = resultline_str;
				operating.push('-');
				multidigit = 0;
				place = 2;
			};
			
			
			function equals(){
				if(operating.length != 3){
					document.getElementById('result').innerHTML = 'Error';
					multidigit = 0;
					place = 0;
					return;
				}else{
					if(operating[1] === '+'){
						resultline_str = resultline_str + '<br/>' + (parseInt(operating[0]) + parseInt(operating[2])) + '<br/>';
					}else if(operating[1] === '-'){
						resultline_str = resultline_str + '<br/>' + (parseInt(operating[0]) - parseInt(operating[2])) + '<br/>';
					}else if(operating[1] === '*'){
						resultline_str = resultline_str + '<br/>' + (parseInt(operating[0]) * parseInt(operating[2])) + '<br/>';
					}else if(operating[1] === '/'){
						resultline_str = resultline_str + '<br/>' + (parseInt(operating[0]) / parseInt(operating[2])) + '<br/>';
					};
				};
				document.getElementById('result').innerHTML = resultline_str;
				operating = [];
				multidigit = 0;
				place = 0;
			};
			
			function clear_line(){
				resultline_str = " ";
				document.getElementById('result').innerHTML = resultline_str;
				operating = [];
				multidigit = 0;
				place = 0;
			};
			
			function times(){
				resultline_str += " *";
				document.getElementById('result').innerHTML = resultline_str;
				operating.push('*');
				multidigit = 0;
				place = 2;
			};
			
			function divide(){
				resultline_str += " /";
				document.getElementById('result').innerHTML = resultline_str;
				operating.push('-');
				multidigit = 0;
				place = 2;
			};

body{
				background-color:lightblue;
			}
			#head{
				background-color:blue;
				color:white;
				padding:10px;
				margin:10 auto;
				text-align:center;
				font-size:20px;
				font-family:courier;
				border:5px solid grey;
			}
			#grid{
				height:510px;
				width:260px;
				background-color:blue;
				color:white;
				border-collapse:collapse;
				border:10px solid black;
				float:left;
				margin-right:10px;
				
			}
			td{
				padding:30px;
				font-size:40px;
				size:400%;
				font-family:courier;
				font-weight:bold;
			}
			#result{
				float:right;
				height:525px;
				width:950px;
				background-color:white;
				border:2px solid black;
				text-align:right;
				font-size:45px;
				font-family:courier;
				font-weight:strong;
			}

<div id="head">
			<h1>Calculator<h1>
		</div>
		<div id="grid">
		
		<!-- calculator buttons -->
		<table>
			<tr>
				<td id="1" onclick='type1()'>1</td>
				<td id="2" onclick='type2()'>2</td>
				<td id="3" onclick='type3()'>3</td>
			</tr>
			<tr>
				<td id="4" onclick='type4()'>4</td>
				<td id="5" onclick='type5()'>5</td>
				<td id="6" onclick='type6()'>6</td>
			</tr>
			<tr>
				<td id="7" onclick='type7()'>7</td>
				<td id="8" onclick='type8()'>8</td>
				<td id="9" onclick='type9()'>9</td>
			</tr>
			<tr>
				<td id="=" onclick='equals()'>=</td>
				<td id="+" onclick='type_plus()'>+</td>
				<td id="-" onclick='type_minus()'>-</td>
			</tr>
			<tr>
				<td id="times" onclick='times()'>X</td>
				<td id="clear" onclick='clear_line()'>C</td>
				<td id="divide" onclick='divide()'>%</td>
			</tr>
		</table>
		</div>
<div id="result">
		<b></b>
		</div>

【问题讨论】：

每次你看到你在你的代码中重复某些东西意味着你做错了什么。我指的是您的九个typeX 函数，它基本上是一个采用单个参数的函数。
首先，您每次都在重复相同的功能。我将创建一个名为 type(parameter) 的函数，因此当用户单击键 2 时，您将调用该函数，如下所示：type(2)。这同样适用于加号、减号、除号和时间。在全局范围、变量保护等方面存在很多错误。希望对您有所帮助。
您需要注意模式，然后创建您看到重复的功能。这就是您的代码太长的原因。其次，您应该考虑阅读调车场算法，这将帮助您解决第二个操作数和其他问题
那是什么样的缩进？
这个问题不适合codereview.stackexchange.com吗？

标签： javascript html css syntax calculator

【解决方案1】：

作为一个好的经验法则，您应该创建函数以避免重复代码。您的表格应如下所示，并调用相同的函数来输入数字：

<div id="head">
        <h1>Calculator
            <h1>
    </div>
    <div id="grid">

        <!-- calculator buttons -->
        <table>
            <tr>
                <td id="1" onclick='typeNumber(1)'>1</td>
                <td id="2" onclick='typeNumber(2)'>2</td>
                <td id="3" onclick='typeNumber(3)'>3</td>
            </tr>
            <tr>
                <td id="4" onclick='typeNumber(4)'>4</td>
                <td id="5" onclick='typeNumber(5)'>5</td>
                <td id="6" onclick='typeNumber(6)'>6</td>
            </tr>
            <tr>
                <td id="7" onclick='typeNumber(7)'>7</td>
                <td id="8" onclick='typeNumber(8)'>8</td>
                <td id="9" onclick='typeNumber(9)'>9</td>
            </tr>
            <tr>
                <td id="=" onclick='equals()'>=</td>
                <td id="+" onclick='type_plus()'>+</td>
                <td id="-" onclick='type_minus()'>-</td>
            </tr>
            <tr>
                <td id="times" onclick='times()'>X</td>
                <td id="clear" onclick='clear_line()'>C</td>
                <td id="divide" onclick='divide()'>%</td>
            </tr>
        </table>
    </div>
    <div id="result">
        <b></b>
    </div>
</div>

函数看起来像这样：

function typeNumber(num) {
    resultline_str += " " + num;
    document.getElementById('result').innerHTML = resultline_str;
    if (multidigit === 0) {
        operating.push(num);
        multidigit = 1;
    } else {
        if (space === 0) {
            var n = operating[0]
            n = operating[0].toString();
            n += num;
            n = parseInt(n);
            operating[0] = n;
        } else {
            var n = operating[2]
            n = operating[2].toString();
            n += num;
            n = parseInt(n);
            operating[2] = n;
        };
    };
};

但是，您的 divide() 函数不起作用的原因是您将减号而不是除号推入操作数组。您需要将其更改为：

function divide() {
    resultline_str += " /";
    document.getElementById('result').innerHTML = resultline_str;
    operating.push('/');
    multidigit = 0;
    place = 2;
};

【讨论】：

【解决方案2】：

开始之前：请注意分号。 JavaScript 在分号方面非常松散，很容易用错位或丢失分号来打自己的脚。

正如其他人已经告诉你的那样（我总是迟到，我老了 ;-)）：你的代码中有太多重复。例如，您可以创建一个函数来处理输入按钮。在 HTML 中

<td id="1" onclick='getInput(this)'>1</td>

在脚本中

function getInput(el){
  var value = el.id;
  var num, op;
  num = parseInt(value);
  if(!isNaN(value)){
    // it is a number
    // handle numbers
  } else {
    // it is an operator
    op = value;
    // handle operators
  }
}

或者按照 John Stevens 的建议，将每个数字和运算符分别拆分为两个单独的函数。

但回到你的问题：为什么多位数字不起作用。所以，让我们把它拆开：

function type9() {
  // we got a digit 9 as a string, concatenate it to the resultstring
  resultline_str += " 9";
  // and "print" it
  document.getElementById('result').innerHTML = resultline_str;
  // the first digit doesn't get any special treatment, just
  // shoved on the stack 
  if (multidigit === 0) {
    operating.push(9);
    // flag that we already have one digit on the stack
    multidigit = 1;
  } else {
    // space is alwys 0, it never gets changed anywhere
    // so only the first branch runs, the "else" is never reached
    if (space === 0) {
      // put the value of the zeroth element of "operating" into n
      var n = operating[0];
      // overwrite(!) that with the zeroth element of "operating"
      // cast to a string
      n = operating[0].toString();
      // concatenate the digit 9 as a string to the end of "n"
      n += '9';
      // make an integer Number out of it
      n = parseInt(n);
      // put that number back to the zeroth place in "operators
      operating[0] = n;
    }
    // there is no "else" hence no second operator, everything
    // get shoved into the first one
    else {
      var n = operating[2]
      n = operating[2].toString();
      n += '9';
      n = parseInt(n);
      operating[2] = n;
    }
  }
}

算术运算符

  function type_plus() {
    // print the operator
    resultline_str += " +";
    document.getElementById('result').innerHTML = resultline_str;
    // add the operator to the end of "operating" as a string
    operating.push('+');
    // reset the flag that counts the digits
    multidigit = 0;
    // set "place" to the value 2 as an integer
    place = 2;
  }

实际计算

  function equals() {
    // check for errors: always a good idea!
    if (operating.length != 3) {
      document.getElementById('result').innerHTML = 'Error';
      // reset everything
      multidigit = 0;
      place = 0;
      return;
    } else {
      // iterate over the possible operators
      if (operating[1] === '+') {

        resultline_str = resultline_str + '<br/>' 
              // do the actual addition
              // put it in parenthesis to avoid automatic conversion
              // to a string
              + (parseInt(operating[0]) + parseInt(operating[2])) 
              + '<br/>';
      } else if {
        // let me skip the rest, ok?
      }
    }
    // print the result
    document.getElementById('result').innerHTML = resultline_str;
    // reset all variables
    operating = [];
    multidigit = 0;
    place = 0;
  }

那么，&%$§ 错误在哪里？您已选择“空格”作为变量以在运算符之间有所不同，但改用“位置”。只需将每个“空格”替换为“地点”即可。

【讨论】：