我的 HTML/Javascript 计算器无法工作

Question

我正在编写一个简单的 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>

Answer 1

你有几个; 丢失，并且您构建了一个带有变量的字符串，并且<br>未引用为 html。

我修复了您的问题，将其添加到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];
                    };
                };

Answer 2

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

这就是我调试的方式，您将来可能有兴趣解决此问题。 如果您使用的是 Chrome 浏览器，请按ctrl + shift + j 调出控制台，您应该会看到类似第 165 行语法错误的内容以及类似意外字符“<”等等的内容。 这应该几乎可以给你一个关于出了什么问题的提示。

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];
                };

Answer 3

使用 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]);

如果您钳位 (operating[0]+operating[2]) 等，则不需要 parseInt()。

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

Answer 4

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

---

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

当您在equals函数的第一行调用operating length时，您放置了一个() ，而它应该像这样调用...

if(operating.length != 3){

---

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

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]);

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

Answer 5

我重新编码了你的计算器。 如果您在 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 );

使用更简单的核心函数进行计算（“cases”变量只是对 case/switch 进行编码的一种不同方式）：

    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。 - 我在小提琴中解决了这个问题。

这是一个 jsfiddle： https ://jsfiddle.net/mckinleymedia/69487mwx/