计算器jquery

Question

我对 jQuery 很感兴趣，我正在尝试创建一个基本的加法和减法计算器，但是当用户添加（或减去）一个数字时，我遇到了一些问题，输入框中以前的数字不会消失并添加到下一个函数。

我该如何修复它？

这是小提琴：http://jsfiddle.net/maniator/8v9zT/7/

这里是我的javascript代码：

var calculator = {
    calcArea: $('<div>',{id: 'calcArea'}),
    buttons: $('<div>',{id: 'buttonArea'}),
    textArea: $('<input>',{type: 'text', id: 'calcText', readonly: true}),
    calcStack: null,
    prevEq: null,
    body: $('body'),
    init: function(){
        var self = this;
        self.createInterface();
        $('button').click(function(e){
            self.clickButton(e.currentTarget)
        })
    },
    createInterface: function(){

        this.buttons.append(this.textArea);

        for(var i = 1; i <= 10; i++){
            this.buttons.append($('<button>',{text: (i==10?0:i), class: 'button'}))
        } 

        this.buttons.append($('<button>',{text: '+', class: 'button'}))
        this.buttons.append($('<button>',{text: '-', class: 'button'}))
        this.calcArea.append(this.buttons);
        this.body.append(this.calcArea);
    },
    clickButton: function(obj){
        var html = obj.innerHTML;
        var operator = false;

        if(html == '+' || html == '-'){
            if(this.calcStack == '+' || this.calcStack == '-' || this.calcStack == null){
                alert('error cannot do that!');
                return;
            }
            operator = true;
        }
        if(this.calcStack == '+'){
            html = parseInt(html) + parseInt(this.prevEq);
            operator = true;
            console.log('adding')
        }
        if(this.calcStack == '-'){
            html = parseInt(html) - parseInt(this.prevEq);
            operator = true;
            console.log('subtracting')
        }
        this.prevEq = this.calcStack;
        this.calcStack = (operator?html:((this.calcStack!=null?this.calcStack:'') + html));
        console.log('you clicked:', html, this.prevEq);
        this.textArea.val(this.calcStack)
    }
} 

calculator.init();

非常感谢您的帮助^_^

Answer 1

你应该做

html =  parseInt(this.prevEq) + parseInt(html);

and

html =  parseInt(this.prevEq) - parseInt(html);

而不是

html =  parseInt(html) + parseInt(this.prevEq);

and

html =  parseInt(html) - parseInt(this.prevEq);

添加时顺序不是问题。就是你做减法的时候。 (a + b) == (b + a) 但 (a - b) != (b - a)

编辑

哎呀，这似乎不是你的问题想解决。我刚刚查看了您的代码并解决了我看到的第一个错误。
我猜您将需要添加一个“=”按钮来显示结果并清除堆栈。我不太确定你打算在这里做什么。对我来说，不断加减数字似乎是完全可以接受的。

编辑2

我重新开始并带来了一个新的解决方案

Answer 2

就我个人而言，我会这样做：
（在这里小提琴：http://jsfiddle.net/billymoon/QWUhW/）

// declare global variables
var result = 0, current = '', adding = true

// create calculator interface
$('body').append(
    $('<div />').attr({ id: 'calcArea' }).append(
        $('<p />').attr({ id: 'calcText' }).html(result), $('<div />').attr({ id: 'buttonArea' }).append(
            $('<button />').addClass('button').text(7),
            $('<button />').addClass('button').text(8),
            $('<button />').addClass('button').text(9),
            $('<button />').addClass('button').text(4),
            $('<button />').addClass('button').text(5),
            $('<button />').addClass('button').text(6),
            $('<button />').addClass('button').text(1),
            $('<button />').addClass('button').text(2),
            $('<button />').addClass('button').text(3),
            $('<button />').addClass('button').text(0),
            $('<button />').addClass('button').text('+'),
            $('<button />').addClass('button').text('-')
        )
    )
)

// add click events
$('button').click(function() {

    // if it is a plus or minus
    if (m = $(this).text().match(/([\+\-])/)){

        // if mode is adding (+ was pressed more recently than -)
        // add result = result + current
        // otherwise result = result - current
        result = adding ? result + parseInt(current) : result - parseInt(current)

        // display result in results area
        $('#calcText').text(result)

        // reset current value
        current = ''

        // if + was pressed, adding is true else adding is false
        adding = m[1] == '+' ? true : false

    } else { // otherwise it is a number

        // add to current (as a string)
        current = current + $(this).text()

        // display current in results area
        $('#calcText').text(current)
    }
})