SitePoint Sponsor 

User Tag List
Results 26 to 34 of 34

Nov 3, 2008, 14:55 #26
 Join Date
 Jan 2007
 Location
 Christchurch, New Zealand
 Posts
 14,729
 Mentioned
 104 Post(s)
 Tagged
 4 Thread(s)
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
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.newNumberProgramming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript

Nov 3, 2008, 16:40 #27
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.

Nov 3, 2008, 16:55 #28
 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 20:24.
Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript

Nov 3, 2008, 19:01 #29
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?

Nov 3, 2008, 20:23 #30
 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

Nov 4, 2008, 13:45 #31
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.

Nov 4, 2008, 15:59 #32
 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

Nov 4, 2008, 19:08 #33
It sounds good but with the new code addition or clear does not work.
updated page
I'm looking for an error.

Nov 4, 2008, 19:33 #34
 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