Calculator jquery [closed]

问题

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.

Closed 6 years ago.

I am having some fun with jQuery and I am trying to create a basic add and subtract calculator but I am having some issues when a user adds (or subtracts) a number, the previous numbers in the input box dont disappear and get added to the next function.

how do i fix it?

Here is the fiddle: http://jsfiddle.net/maniator/8v9zT/7/

here is my javascript code:

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

Thank you so much for your help ^_^

回答1:

You should do

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

and

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

Instead of

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

and

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

The order is not a problem when you're adding. It is when you're subtracting. (a + b) == (b + a) but (a - b) != (b - a)

EDIT

Oops, this doesn't seem the problem you wanted to resolve. I just looked in your code and solved the first bug I saw. You will need to add an '=' button to show the result and clear the stack I guess. I'm not really sure what you intend to do here. To me it seems perfectly acceptable to keep adding and subtracting numbers.

EDIT 2

I started over and came with a new solution

回答2:

Personally I would do it like this: (fiddle here: 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)
    }
})

来源：https://stackoverflow.com/questions/5490783/calculator-jquery