-5

我在 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();

非常感谢您的帮助^_^

4

2 回答 2

1

你应该做

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

和

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

代替

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

和

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

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

编辑

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

编辑 2

我重新开始并提出了一个新的解决方案

于 2011-03-30T19:31:11.210 回答
0

我个人会这样做：（这里的小提琴：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)
    }
})
于 2011-03-30T20:05:36.510 回答