我的HTML / Javascript计算器不起作用

时间：2015-11-14 20:51:28

标签： javascript html css syntax calculator

我正在编写一个简单的UI计算器，它完美地工作，直到我优化了一些函数，使计算器实际计算。我查看了我的代码，但我找不到JavaScript的错误。该片段仅包含数字1,2,3但实际内容为1-9。 

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 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> + operating[0] + operating[2];
					}else if(operating[1] === '-'){
						resultline_str = resultline_str + <br> + operating[0] - operating[2];
					}else if(operating[1] === '*'){
						resultline_str = resultline_str + <br> + operating[0] * operating[2];
					}else if(operating[1] === '/'){
						resultline_str = resultline_str + <br> + operating[0] / operating[2];
					};
				};
				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;
			};
#grid{
				height:510px;
				width:260px;
				background-color:blue;
				color:white;
				border-collapse:collapse;
				border:10px solid black;
				float:left;
				margin-right:10px;
				
			}
#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;
			}
td{
				padding:30px;
				font-size:40px;
				size:400%;
				font-family:courier;
				font-weight:bold;
			}
<!DOCTYPE html>
<head>
</head>
<body>
  <div id='grid'>
  <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="=" 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>  
 </body>
 </html>

5 个答案:

答案 0 :(得分：0)

你有几个;缺少并且您构建了一个包含变量的字符串以及未引用为html的<br>。

我修复了您的问题，将其添加到JS-fiddle。 现在你只需要parseInt（）计算器的值就可以了。

else{
                    if(operating[1] === '+'){
                        resultline_str = resultline_str + '<br>' + operating[0] + operating[2];
                    }else if(operating[1] === '-'){
                        resultline_str = resultline_str + '<br>' + operating[0] - operating[2];
                    }else if(operating[1] === '*'){
                        resultline_str = resultline_str + '<br>' + operating[0] * operating[2];
                    }else if(operating[1] === '/'){
                        resultline_str = resultline_str + '<br>' + operating[0] / operating[2];
                    };
                };

答案 1 :(得分：0)

您在下面的代码中遇到了一个小的语法错误。注意＆＃34; br ＆＃34;标签？它应该是字符串的一部分。

这是我调试的方式，您可能有兴趣在将来解决这个问题。如果您使用的是Chrome浏览器，请按 ctrl + shift + j 打开控制台，您应该会看到类似于第165行的语法错误和一些符合意想不到的性格的东西＆＃34;＆lt;＆＃34;等等等等。这应该会给你一个关于出了什么问题的暗示。 

if(operating[1] === '+'){
                    resultline_str = resultline_str + <br> + operating[0] + operating[2];
                }else if(operating[1] === '-'){
                    resultline_str = resultline_str + <br> + operating[0] - operating[2];
                }else if(operating[1] === '*'){
                    resultline_str = resultline_str + <br> + operating[0] * operating[2];
                }else if(operating[1] === '/'){
                    resultline_str = resultline_str + <br> + operating[0] / operating[2];
                };

答案 2 :(得分：0)

使用chrome / firefox开发人员功能，例如Tendious提到的。

这是我的jsfiddle                         我

if(operating[1] === '+'){
                        resultline_str = resultline_str + '<br>' + (operating[0] + operating[2]);
                    }else if(operating[1] === '-'){
                        resultline_str = resultline_str + '<br>' + (operating[0] - operating[2]);
                    }else if(operating[1] === '*'){
                        resultline_str = resultline_str + '<br>' + (operating[0] * operating[2]);
                    }else if(operating[1] === '/'){
                        resultline_str = resultline_str + '<br>' + (operating[0] / operating[2]);

如果你钳制（操作[0] +操作[2]）等等，你不需要parseInt（）。

然后它再也没有字符串连接了。相反，它是一个数学运算（因为两个变量的类型都是数字）。与“
”的串联是在数学之后完成的。

答案 3 :(得分：0)

我确实在代码中发现了一些问题......我将用行分隔它们。

if(operating.length() != 3){

当您在()函数的第一行调用length operating时，您放置了equals，此时它应该被调用。 

if(operating.length != 3){

在else函数的if语句的equals块中，您添加了几个字符串，就像这一个...... 

resultline_str = resultline_str + <br> + operating[0] + operating[2];

当您在字符串中添加<br>时，您忘记在其周围加上引号。这在块中发生了好几次。它应该是这样的：

resultline_str = resultline_str + "<br>" + operating[0] + operating[2];

我还注意到在运行1 + 2 = 12。

的修改后的代码时

问题在于，在上面提到的同一个区块中，您在一个字符串中添加了数字，而不是计算，只是将数字放在彼此旁边。

resultline_str = resultline_str + "<br>" + operating[0] + operating[2];

应该是

resultline_str = resultline_str + "<br>" + (operating[0] + operating[2]);

我在添加的数字周围添加括号，以便在附加到字符串之前计算它们。

答案 4 :(得分：0)

我重新编码了你的计算器。如果您在json中定义计算器，那么您可以更改其工作方式并轻松布局：

var calculator = {
        buttons: [
            [
                { value: '1', type: 'num' },
                { value: '2', type: 'num' },
                { value: '3', type: 'num' }
            ],
...

你可以像这样简单地保持html：

<div class="calculator"></div>

然后你通过像这样踩过json来生成html：

var buildCalculator = function( target, buttons){
        $(target)
            .append( 
                $('<div />')
                    .addClass( 'result' )
            )
            .append( 
                $('<div />')
                    .addClass( 'equation' )
            );
        _.each(buttons, function (row, r) {
            $(target)
                .append( 
                     addRow(row, r)
                )
        });
    },
    addRow = function(row, r){
        var div = $('<div />')
            .addClass( 'row row-' + r );
        _.each(row, function (col, c) {
            div.append( 
                    addCol(col,c)
                )
        });
        return div;
    },
    addCol = function addCols(col,c){
        return $('<button />')
            .addClass( 'col col-' + c + ' js-' + col.type + ' ' + col.class )
            .attr( 'data-action', col.action )
            .html( col.value );
    };
buildCalculator('.calculator', calculator.buttons );

使用更简单的核心功能计算（＆＃39; case＆＃39;变量只是编码案例/开关的另一种方式）：

    calculate = function() {
        var p = 0,
            result = 0,
            op = 'add',
            eqAdd = function(i) { result = result + equation[i].value; },
            eqSub = function(i) { result = result - equation[i].value; },
            eqTimes = function(i) { result = result * equation[i].value; },
            eqDiv = function(i) { result = result / equation[i].value; },
            cases = {
                'add': eqAdd,
                'sub': eqSub,
                'times': eqTimes,
                'div': eqDiv
            };
        _.each(equation, function (eq, i) {
            if(op){
                if (cases[op]) cases[op](i);
                op = false;
            } else {
                op = eq.action;
            }
        });
        $('.result')
            .html( result );
    };

最后，使用jQuery处理按钮点击：

$('.js-num').click( function(){
    equation[position].value = equation[position].value * 10 + parseInt($(this).text());
    $('.equation .pos-' + position).html( equation[position].value );
    calculate();
});
$('.js-calc').click( function(){
    position++
    addPosition( $(this).text() );
    equation.push( { type: 'calc', action: $(this).attr('data-action') } );
    $('.equation .pos-' + position)
        .addClass('calc')
        .html( equation[position].value );
    position++
    addPosition( '0' );
    equation.push( { type: 'num', value: 0 } );
    calculate();
});
$('.js-clear').click( function(){
    clear();
});

这不是完全烘焙的 - 它只是在每个项目经过时计算，这意味着它在添加之前不会计算乘法。为此，我在计算方程时对方程进行预处理，并在所有乘法和除法符号之间嵌套项。这需要一个递归函数来走json。 - 我把它固定在小提琴里。

这是一个小提琴手： https://jsfiddle.net/mckinleymedia/69487mwx/

相关问题
最新问题