-1
我想用HTML和Javascript的用户界面做一个计算器。我修复了很多错误，但仍然存在如下问题：如果第二个操作员不止一个数字，则答案错误，并且分区不起作用。我是相当新的，我知道我的代码效率低下，300行太长，但有人可以幽默我，并解释我的错误？Javascript用户界面计算器
var resultline_str = " ";
\t \t \t var multidigit = 0
\t \t \t var space = 0
\t \t \t var operating = [];
\t \t \t
\t \t \t function type1(){
\t \t \t \t resultline_str += " 1";
\t \t \t \t document.getElementById('result').innerHTML = resultline_str;
\t \t \t \t if(multidigit === 0){
\t \t \t \t \t operating.push(1);
\t \t \t \t \t multidigit = 1;
\t \t \t \t }else{
\t \t \t \t \t if(space === 0){
\t \t \t \t \t \t var n = operating[0]
\t \t \t \t \t \t n = operating[0].toString();
\t \t \t \t \t \t n += '1';
\t \t \t \t \t \t n = parseInt(n);
\t \t \t \t \t \t operating[0] = n;
\t \t \t \t \t }else{
\t \t \t \t \t \t var n = operating[2]
\t \t \t \t \t \t n = operating[2].toString();
\t \t \t \t \t \t n += '1';
\t \t \t \t \t \t n = parseInt(n);
\t \t \t \t \t \t operating[2] = n;
\t \t \t \t \t };
\t \t \t \t };
\t \t \t };
\t \t \t
\t \t \t function type2(){
\t \t \t \t resultline_str += " 2";
\t \t \t \t document.getElementById('result').innerHTML = resultline_str;
\t \t \t \t if(multidigit === 0){
\t \t \t \t \t operating.push(2);
\t \t \t \t \t multidigit = 1;
\t \t \t \t }else{
\t \t \t \t \t if(space === 0){
\t \t \t \t \t \t var n = operating[0]
\t \t \t \t \t \t n = operating[0].toString();
\t \t \t \t \t \t n += '2';
\t \t \t \t \t \t n = parseInt(n);
\t \t \t \t \t \t operating[0] = n;
\t \t \t \t \t }else{
\t \t \t \t \t \t var n = operating[2]
\t \t \t \t \t \t n = operating[2].toString();
\t \t \t \t \t \t n += '2';
\t \t \t \t \t \t n = parseInt(n);
\t \t \t \t \t \t operating[2] = n;
\t \t \t \t \t };
\t \t \t \t };
\t \t \t };
\t \t \t
\t \t \t function type3(){
\t \t \t \t resultline_str += " 3";
\t \t \t \t document.getElementById('result').innerHTML = resultline_str;
\t \t \t \t if(multidigit === 0){
\t \t \t \t \t operating.push(3);
\t \t \t \t \t multidigit = 1;
\t \t \t \t }else{
\t \t \t \t \t if(space === 0){
\t \t \t \t \t \t var n = operating[0]
\t \t \t \t \t \t n = operating[0].toString();
\t \t \t \t \t \t n += '3';
\t \t \t \t \t \t n = parseInt(n);
\t \t \t \t \t \t operating[0] = n;
\t \t \t \t \t }else{
\t \t \t \t \t \t var n = operating[2]
\t \t \t \t \t \t n = operating[2].toString();
\t \t \t \t \t \t n += '3';
\t \t \t \t \t \t n = parseInt(n);
\t \t \t \t \t \t operating[2] = n;
\t \t \t \t \t };
\t \t \t \t };
\t \t \t };
\t \t \t
\t \t \t function type4(){
\t \t \t \t resultline_str += " 4";
\t \t \t \t document.getElementById('result').innerHTML = resultline_str;
\t \t \t \t if(multidigit === 0){
\t \t \t \t \t operating.push(4);
\t \t \t \t \t multidigit = 1;
\t \t \t \t }else{
\t \t \t \t \t if(space === 0){
\t \t \t \t \t \t var n = operating[0]
\t \t \t \t \t \t n = operating[0].toString();
\t \t \t \t \t \t n += '4';
\t \t \t \t \t \t n = parseInt(n);
\t \t \t \t \t \t operating[0] = n;
\t \t \t \t \t }else{
\t \t \t \t \t \t var n = operating[2]
\t \t \t \t \t \t n = operating[2].toString();
\t \t \t \t \t \t n += '4';
\t \t \t \t \t \t n = parseInt(n);
\t \t \t \t \t \t operating[2] = n;
\t \t \t \t \t };
\t \t \t \t };
\t \t \t };
\t \t \t
\t \t \t function type5(){
\t \t \t \t resultline_str += " 5";
\t \t \t \t document.getElementById('result').innerHTML = resultline_str;
\t \t \t \t if(multidigit === 0){
\t \t \t \t \t operating.push(5);
\t \t \t \t \t multidigit = 1;
\t \t \t \t }else{
\t \t \t \t \t if(space === 0){
\t \t \t \t \t \t var n = operating[0]
\t \t \t \t \t \t n = operating[0].toString();
\t \t \t \t \t \t n += '5';
\t \t \t \t \t \t n = parseInt(n);
\t \t \t \t \t \t operating[0] = n;
\t \t \t \t \t }else{
\t \t \t \t \t \t var n = operating[2]
\t \t \t \t \t \t n = operating[2].toString();
\t \t \t \t \t \t n += '5';
\t \t \t \t \t \t n = parseInt(n);
\t \t \t \t \t \t operating[2] = n;
\t \t \t \t \t };
\t \t \t \t };
\t \t \t };
\t \t \t
\t \t \t function type6(){
\t \t \t \t resultline_str += " 6";
\t \t \t \t document.getElementById('result').innerHTML = resultline_str;
\t \t \t \t if(multidigit === 0){
\t \t \t \t \t operating.push(6);
\t \t \t \t \t multidigit = 1;
\t \t \t \t }else{
\t \t \t \t \t if(space === 0){
\t \t \t \t \t \t var n = operating[0]
\t \t \t \t \t \t n = operating[0].toString();
\t \t \t \t \t \t n += '6';
\t \t \t \t \t \t n = parseInt(n);
\t \t \t \t \t \t operating[0] = n;
\t \t \t \t \t }else{
\t \t \t \t \t \t var n = operating[2]
\t \t \t \t \t \t n = operating[2].toString();
\t \t \t \t \t \t n += '6';
\t \t \t \t \t \t n = parseInt(n);
\t \t \t \t \t \t operating[2] = n;
\t \t \t \t \t };
\t \t \t \t };
\t \t \t };
\t \t \t
\t \t \t function type7(){
\t \t \t \t resultline_str += " 7";
\t \t \t \t document.getElementById('result').innerHTML = resultline_str;
\t \t \t \t if(multidigit === 0){
\t \t \t \t \t operating.push(7);
\t \t \t \t \t multidigit = 1;
\t \t \t \t }else{
\t \t \t \t \t if(space === 0){
\t \t \t \t \t \t var n = operating[0]
\t \t \t \t \t \t n = operating[0].toString();
\t \t \t \t \t \t n += '7';
\t \t \t \t \t \t n = parseInt(n);
\t \t \t \t \t \t operating[0] = n;
\t \t \t \t \t }else{
\t \t \t \t \t \t var n = operating[2]
\t \t \t \t \t \t n = operating[2].toString();
\t \t \t \t \t \t n += '7';
\t \t \t \t \t \t n = parseInt(n);
\t \t \t \t \t \t operating[2] = n;
\t \t \t \t \t };
\t \t \t \t };
\t \t \t };
\t \t \t
\t \t \t function type8(){
\t \t \t \t resultline_str += " 8";
\t \t \t \t document.getElementById('result').innerHTML = resultline_str;
\t \t \t \t if(multidigit === 0){
\t \t \t \t \t operating.push(8);
\t \t \t \t \t multidigit = 1;
\t \t \t \t }else{
\t \t \t \t \t if(space === 0){
\t \t \t \t \t \t var n = operating[0]
\t \t \t \t \t \t n = operating[0].toString();
\t \t \t \t \t \t n += '8';
\t \t \t \t \t \t n = parseInt(n);
\t \t \t \t \t \t operating[0] = n;
\t \t \t \t \t }else{
\t \t \t \t \t \t var n = operating[2]
\t \t \t \t \t \t n = operating[2].toString();
\t \t \t \t \t \t n += '8';
\t \t \t \t \t \t n = parseInt(n);
\t \t \t \t \t \t operating[2] = n;
\t \t \t \t \t };
\t \t \t \t };
\t \t \t };
\t \t \t function type9(){
\t \t \t \t resultline_str += " 9";
\t \t \t \t document.getElementById('result').innerHTML = resultline_str;
\t \t \t \t if(multidigit === 0){
\t \t \t \t \t operating.push(9);
\t \t \t \t \t multidigit = 1;
\t \t \t \t }else{
\t \t \t \t \t if(space === 0){
\t \t \t \t \t \t var n = operating[0]
\t \t \t \t \t \t n = operating[0].toString();
\t \t \t \t \t \t n += '9';
\t \t \t \t \t \t n = parseInt(n);
\t \t \t \t \t \t operating[0] = n;
\t \t \t \t \t }else{
\t \t \t \t \t \t var n = operating[2]
\t \t \t \t \t \t n = operating[2].toString();
\t \t \t \t \t \t n += '9';
\t \t \t \t \t \t n = parseInt(n);
\t \t \t \t \t \t operating[2] = n;
\t \t \t \t \t };
\t \t \t \t };
\t \t \t };
\t \t \t function type_plus(){
\t \t \t \t resultline_str += " +";
\t \t \t \t document.getElementById('result').innerHTML = resultline_str;
\t \t \t \t operating.push('+');
\t \t \t \t multidigit = 0;
\t \t \t \t place = 2;
\t \t \t };
\t \t \t
\t \t \t function type_minus(){
\t \t \t \t resultline_str += " -";
\t \t \t \t document.getElementById('result').innerHTML = resultline_str;
\t \t \t \t operating.push('-');
\t \t \t \t multidigit = 0;
\t \t \t \t place = 2;
\t \t \t };
\t \t \t
\t \t \t
\t \t \t function equals(){
\t \t \t \t if(operating.length != 3){
\t \t \t \t \t document.getElementById('result').innerHTML = 'Error';
\t \t \t \t \t multidigit = 0;
\t \t \t \t \t place = 0;
\t \t \t \t \t return;
\t \t \t \t }else{
\t \t \t \t \t if(operating[1] === '+'){
\t \t \t \t \t \t resultline_str = resultline_str + '<br/>' + (parseInt(operating[0]) + parseInt(operating[2])) + '<br/>';
\t \t \t \t \t }else if(operating[1] === '-'){
\t \t \t \t \t \t resultline_str = resultline_str + '<br/>' + (parseInt(operating[0]) - parseInt(operating[2])) + '<br/>';
\t \t \t \t \t }else if(operating[1] === '*'){
\t \t \t \t \t \t resultline_str = resultline_str + '<br/>' + (parseInt(operating[0]) * parseInt(operating[2])) + '<br/>';
\t \t \t \t \t }else if(operating[1] === '/'){
\t \t \t \t \t \t resultline_str = resultline_str + '<br/>' + (parseInt(operating[0])/parseInt(operating[2])) + '<br/>';
\t \t \t \t \t };
\t \t \t \t };
\t \t \t \t document.getElementById('result').innerHTML = resultline_str;
\t \t \t \t operating = [];
\t \t \t \t multidigit = 0;
\t \t \t \t place = 0;
\t \t \t };
\t \t \t
\t \t \t function clear_line(){
\t \t \t \t resultline_str = " ";
\t \t \t \t document.getElementById('result').innerHTML = resultline_str;
\t \t \t \t operating = [];
\t \t \t \t multidigit = 0;
\t \t \t \t place = 0;
\t \t \t };
\t \t \t
\t \t \t function times(){
\t \t \t \t resultline_str += " *";
\t \t \t \t document.getElementById('result').innerHTML = resultline_str;
\t \t \t \t operating.push('*');
\t \t \t \t multidigit = 0;
\t \t \t \t place = 2;
\t \t \t };
\t \t \t
\t \t \t function divide(){
\t \t \t \t resultline_str += " /";
\t \t \t \t document.getElementById('result').innerHTML = resultline_str;
\t \t \t \t operating.push('-');
\t \t \t \t multidigit = 0;
\t \t \t \t place = 2;
\t \t \t };body{
\t \t \t \t background-color:lightblue;
\t \t \t }
\t \t \t #head{
\t \t \t \t background-color:blue;
\t \t \t \t color:white;
\t \t \t \t padding:10px;
\t \t \t \t margin:10 auto;
\t \t \t \t text-align:center;
\t \t \t \t font-size:20px;
\t \t \t \t font-family:courier;
\t \t \t \t border:5px solid grey;
\t \t \t }
\t \t \t #grid{
\t \t \t \t height:510px;
\t \t \t \t width:260px;
\t \t \t \t background-color:blue;
\t \t \t \t color:white;
\t \t \t \t border-collapse:collapse;
\t \t \t \t border:10px solid black;
\t \t \t \t float:left;
\t \t \t \t margin-right:10px;
\t \t \t \t
\t \t \t }
\t \t \t td{
\t \t \t \t padding:30px;
\t \t \t \t font-size:40px;
\t \t \t \t size:400%;
\t \t \t \t font-family:courier;
\t \t \t \t font-weight:bold;
\t \t \t }
\t \t \t #result{
\t \t \t \t float:right;
\t \t \t \t height:525px;
\t \t \t \t width:950px;
\t \t \t \t background-color:white;
\t \t \t \t border:2px solid black;
\t \t \t \t text-align:right;
\t \t \t \t font-size:45px;
\t \t \t \t font-family:courier;
\t \t \t \t font-weight:strong;
\t \t \t }<div id="head">
\t \t \t <h1>Calculator<h1>
\t \t </div>
\t \t <div id="grid">
\t \t
\t \t <!-- calculator buttons -->
\t \t <table>
\t \t \t <tr>
\t \t \t \t <td id="1" onclick='type1()'>1</td>
\t \t \t \t <td id="2" onclick='type2()'>2</td>
\t \t \t \t <td id="3" onclick='type3()'>3</td>
\t \t \t </tr>
\t \t \t <tr>
\t \t \t \t <td id="4" onclick='type4()'>4</td>
\t \t \t \t <td id="5" onclick='type5()'>5</td>
\t \t \t \t <td id="6" onclick='type6()'>6</td>
\t \t \t </tr>
\t \t \t <tr>
\t \t \t \t <td id="7" onclick='type7()'>7</td>
\t \t \t \t <td id="8" onclick='type8()'>8</td>
\t \t \t \t <td id="9" onclick='type9()'>9</td>
\t \t \t </tr>
\t \t \t <tr>
\t \t \t \t <td id="=" onclick='equals()'>=</td>
\t \t \t \t <td id="+" onclick='type_plus()'>+</td>
\t \t \t \t <td id="-" onclick='type_minus()'>-</td>
\t \t \t </tr>
\t \t \t <tr>
\t \t \t \t <td id="times" onclick='times()'>X</td>
\t \t \t \t <td id="clear" onclick='clear_line()'>C</td>
\t \t \t \t <td id="divide" onclick='divide()'>%</td>
\t \t \t </tr>
\t \t </table>
\t \t </div>
<div id="result">
\t \t <b></b>
\t \t </div>
每当你看到你在你的代码中重复某件事意味着你做错了什么。我指的是你的九个'typeX'函数，它基本上是一个函数，只有一个参数。 – Shomz
首先，您每次都重复相同的功能。我将创建一个名为type（parameter）的函数，因此当用户单击键2时，您可以按如下所示调用函数：type（2）。加号，减号，除法和时间也是如此。 在全球范围内，可变保护等方面存在很多错误。希望能帮助到你。 – wilsotobianco
您需要注意模式，然后创建您看到重复的功能。这就是你的代码太长的原因。其次，你应该考虑阅读关于分流码算法，这将帮助你解决第二操作数和其他问题 – Gacci