SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 34 of 34
  1. #26
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by tictike View Post
    I'm not sure why some of the functions are not over writting others. For example, lets say the user clicks '4'. Eventually we get to

    Code JavaScript:
    function displayNumber(num, calc) {
        calc.display.value = num; 
    }

    and '4' is display on the calc. If next the users clicks '5', and we get to the same function, why doesn't this function erase the 4 and display 5. why does it basically concatenate the two numbers.
    First the number goes through displayNextDigit which multiplies the 4 to 40, and adds on 5 to make 45.
    Then the calculator display is updated in the displayNumber function

    Quote Originally Posted by tictike View Post
    To me, this function is doing the same thing

    Code JavaScript:
    function storeNumber(calc) {
        calc.number = calc.newNumber; //=4
        calc.newNumber = 0;
    }

    I don't see why every newNumber is not changing the value for number. instead its appending the new newNumber to the existing number (if there is one).
    That's because after you're pressed an operation key, such as plus, you don't want the next number to be added on to what's already on the display.
    Keeping the newNumber separate from the existing number that's being shown becomes important also, when you enter a second number that an operation is going to be performed on.

    2 -> displayNextDigit -> displayNumber
    3 -> displayNextDigit -> displayNumber
    + -> calc.operation=plus and store Number (from calc.newNumber into calc.number)
    4 -> displayNextDigit -> displayNumber
    5 -> displayNextDigit -> displayNumber
    = -> calc.operation with calc.number and calc.newNumber
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  2. #27
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What you're saying makes sense but when I read though the function I get confused I've commented how I think this program is working and below what I think happens next.

    Code JavaScript:
    function processSelection(evt) {
        evt = evt || window.target;
        var targ = evt.target || evt.srcElement;
        var theId = targ.id;
        var button = parseFloat(theId);
        if(!isNaN(button)) {
            displayNextDigit(button, this); //1st time - user clicks 4.
        } else {
            switch(theId) {
                case "c":
                    clearDisplay();
                    break;
                case "+":
                    this.operation = plus;
                    break;
                case "=":
                    equals(this);
                    break;
                default:
            }
            storeNumber(calc);
        }
        return false;
    }
     
    function storeNumber(calc) {
        calc.number = calc.newNumber;
        calc.newNumber = 0; 
    }
    function displayNextDigit(num, calc) {//1st time - num = 4.
        calc.newNumber = parseFloat(calc.newNumber) * 10 + parseFloat(num);//1st time - 0 * 10 + 4 = 4
        displayNumber(calc.newNumber, calc);//1st - calc.newNumber = 4 
    }
    function displayNumber(num, calc) {
        calc.display.value = num; //1st - display 4
    }

    now after 4 is displayed on screen storeNumber(calc); that is inside of the processSelection(evt) function is going to run.

    storeNumber(calc); is going to make calc.number = calc.newNumber; and zero out newNumber.

    So if the user clicks '5' when we eventually enter this function

    Code JavaScript:
    function displayNextDigit(num, calc) {
        calc.newNumber = parseFloat(calc.newNumber) * 10 + parseFloat(num);
        displayNumber(calc.newNumber, calc);
    }

    newNumber will equal 5 because storeNumber(calc) that just finished will have set newNumber back to 0.

  3. #28
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    I think I see where the confusion is occuring. The storeNumber function is inside the scope of the else part of the if statement, so storeNumber is going to run only when it's not a number that was pressed.

    It may be clearer as to what's going on to change the placement of storeNumber as follows:

    Code javascript:
    if(!isNaN(button)) {
        displayNextDigit(button, this); //1st time - user clicks 4.
    } else {
        storeNumber(calc);
        switch(theId) {
            case "c":
                clearDisplay();
                break;
            case "+":
                this.operation = plus;
                break;
            case "=":
                equals(this);
                break;
            default:
        }
    }

    But then that's likely to interfere when you use C to clear the number to then type in another number to be used instead, as in:
    2 + 4 [C] 5 = 7

    So, the switch statement should instead be moved to a separate function, and I've tidied up the eventTarget stuff as well.

    Code javascript:
    function processSelection(evt) {
        var calc = this;
        var key = eventTarget(evt).id;
        var digit = parseFloat(key);
        if(!isNaN(digit)) {
            displayNextDigit(digit, calc);
        } else {
            processKey(key, calc);
            storeNumber(calc);
        }
        return false;
    }
    function eventTarget(evt) {
        evt = evt || window.event;
        var targ = evt.target || evt.srcElement;
        return targ;
    }
    function processKey(key, calc) {
        switch(key) {
            case "c":
               clearDisplay();
               break;
            case "+":
               calc.operation = plus;
               break;
            case "=":
                equals(calc);
                break;
            default:
        }
    }
    Last edited by paul_wilkins; Nov 3, 2008 at 21:24.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #29
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    YAY I understand, let's have a party!

    Well.. sort of.

    I'm glad you broke down processSelection its good for me to see how/when to break functions down to other functions. Now that those new functions are there, hitting equals always displays 0.

    page here

    can you give a hint (make me think about it) as to why?

  5. #30
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Yes, because of the updated structure, it's quite easy to see that the this keyword in the processKey function should instead be calc.

    I've updated posting #28 to reflect that as well.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #31
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah I see now. Thanks.

    So right now the calc. adds two numbers and that's it. It won't continue after that. Eventually I will try to extend it (with many questions I assume) to be able to add:

    2 + 84 + 17 + 4 etc.

    But first I thought I would try num + num = + num = + num = etc.

    I added resetNumbers()
    Code JavaScript:
    function equals(calc) {
     
        var total = calc.operation(calc.number, calc.newNumber);
    	clearDisplay(calc);
        displayNumber(total, calc);
    	resetNumbers(calc);
    }
    function resetNumbers(calc) {
    	calc.number = 0;
    	calc.newNumber = calc.display.value;
     
    }

    What I thought it was doing was to adjust the numbers in storeNumber(calc) so the program is will still work after the plus sign is clicked again. What's really confusing me is that it does work, sometimes.

  7. #32
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    We don't want the operation key to update the total whenever the key is pressed, because we should be able to press it multiple times in a row without affecting the total.

    What seems to be needed then is a way to process the operation at some time after the operation key has been pressed, but before a new number is received. What can be done is to check on a number press if an operation is waiting to be performed, then do it.

    Code javascript:
    if(!isNaN(digit)) {
        if (calc.operation) {
            processOperation(calc.operation, calc);
            calc.operation = null;
        }
        displayNextDigit(digit, calc);
    } else {
        processKey(key, calc);
        storeNumber(calc);
    }

    Code javascript:
    function equals(calc) {
        var total = processOperation(calc.operation, calc);
        clearDisplay(calc);
        displayNumber(total, calc);
    }
    function processOperation(operation, calc) {
        calc.number = operation(calc.number, calc.newNumber);
        return calc.number;
    }

    How does that sound for a potential solution.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #33
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It sounds good but with the new code addition or clear does not work.

    updated page

    I'm looking for an error.

  9. #34
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    I'll check the logic over tonight and see what's required for it to work.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •