Adding up....

[o0_Enigma_0o]

Ok
After finding how to make the damm number add up
I need to do it again
if you look at www.orian.co.uk/Lighting/index.html
you will see that Quantity box up dates the total box

Now
here it comes

How the hell do i make all the total boxes add up in one box automaticly at the bottom of the page???

Thx:thumbsup:

[Mr J]

HI

Where to begin that is the question.

I downloaded your page so that I could better understand your layout for a script and........Ouch!


Please don't take this to heart but your tables...aaaaarrrrrggggghhhhhhhhhhhhhhh!.

I understand that you could have had a few beers and forgot how many cells you had aready put in or maybe you just like cells... lots of them.

Seriously though... I had a look at your page and saw that there were a few areas that could do with a little tidying up so I have re-written your page and included a small script that will add up the boxes as per your request.

Seeing what you are wanting to do I know for a fact that you are going to be back at this forum with further questions but if you are in the process of learning javascript it is always better to have a go yourself.

When you use tables and want the TD cells to be a set size do not use percentages, always use a fixed size.
The reason for this is that not everyone has their resolution set at 800 x 600 so a percentage of a different resolution will throw your layout all over the place.

Download this page and take a look at how I have set out your tables.

Let me know




:thumbsup:

[o0_Enigma_0o]

Thanks m8
but i cant download the page from anywhere
did u attach it to your message?

[RadarBob]

Just a real fast browse of your code:

You misspelled "accessories" - well, in the USA at least.

Your total seems to be working; however in "sum8" and "sum9" you're multiplying by zero.

I get an "object expected" error. You're calling "parseelement()" fuction which doesn't exist.

You've written:
function updatetotal(num)
but you never pass anything into the function. I'd get rid of that parameter. Tidy code is professional code:)

I wonder if your sum functions could be written more generically so you reduce the total amount of code you have to maintain.

** Off hand I'd say you'd have to create global variables for all your item costs and discount costs and put them all in one spot at the top of your code. This makes the code more self documenting and you have all your prices in one spot - easier to maintain.

**There is only one sum function. You would pass your costs and your quantity into the summing fuction.

**Inside the sum function you call the updatetotal function. This reduces the amount of code you write, you never forget to total things up when adding new items to your list of things to sell.

[Mr J]

Sorry, thought I'd done that.

Remember this is only preliminary to what you want to achieve.


Ah.... the reason for the download mishap is becasue I did it as an HTML and not txt.

[Mr J]

Hi

I have been pondering over your page and have created another script that adds up the relative fields and also takes into account where the price differs if 5 or more items are purchased.

[RadarBob]

I suspect this revised javascript will not run on Netscape. Isn't "document.all" IE only?

It looks like Mr. J is trying make the adding routine more extendable by creating a loop to run through all the prices and the "length" of the loop is controled by the variable "number". Yes?

suggestion
To get around the IE only thing, and to make allow the number of things for sale on the page grow with only minimal re-coding how about this...

Create a "saleItem" user-defined object with name, quantity, price, discount_price as "properties" (ie variables). You would also write methods (ie functions) to do "individual object level" stuff like calculate quantity * price.

Then, create an array of these saleItem objects. The array represents the list of things for sale on the web page.

Here's how it might work:
A function that runs ONLOAD will build the array of objects. You must explicitly code the names and prices, but it's done all in one function.

The user enters an amount for item x. the ONCHANGE or ONBLUR kicks off a function that gets the name and quantity passed in. The array is searched for that name and the quantity is put in there.

Then the ADD function is called which simply loops through the array calculating item/quantity cost and total cost.

Advantages
Minimal new code when adding items to the web page. Just modify the array creation function to add in a new saleItem object.

The code will be drastically simpler.

Referencing properties of a specific item is easy and clear.

It will work on both IE and NN

Playing with arrays is fun!

Playing with arrays of objects is actually easy, sounds impressive, and will very, very impress your friends :thumbsup:

Hint at what it might look like:

// Global variables
salesItems = new Array ();


// the saleItem object
function saleItem (name, price, discount_price, quantity=0) {
// object properties
this.name = name;
this.price = price;
this.discount = discount_price;
this.quantity = quantity;
this.total = 0;
this.breakpoint = 5;

// object methods
this.itemTotal = itemTotal;

} // function saleItem()

function itemTotal() {
if (this.quantity >= this.breakpoint) {
this.total = this.quantity * this.discount;
}else{
this.total = this.quantity * this.price;
}
}//function itemTotal()


function initSalesItems () {
// create each object and stuff it into the array
salesItems[0] = new salesItem ("gazinta", 4.50, 2.50, 0);
salesItems[1] = new salesItem ("widget", 67.00, 43.00,0);
// add lines here for new items on your web page

} // function initSalesItems


function TotalSales () {
var salesTotal = 0;

for (var i = 0, i<salesItems.length; i++) {
salesTotal += salesItems[i].total;
}
return salesTotal
} // function TotalSales


//***************************
// This function ties it together
//***************************
function doIt (itemName, itemQuantity) {
var theItem = null;

for (var i=0; i<salesItems.length; i++) {
if (salesItems[i].name = itemName) {
theItem = i;
}
}

if (theItem == null); {
alert (itemName + " is not in our inventory list");
}else{
salesItems[theItem].quantity = itemQuantity;
salesItems[theitem].itemTotal();
FeedBack_Form.grandTotal.value = TotalSales();
}// function doIt()

///////////////////////////////////////////////

// here's what you might see in the body;

<body ... onload="initSaleItems()">

. . .
<td valign="top" align="center">
<INPUT TYPE="text" NAME="Wiget" SIZE="3" value="0" onclick="select()"
onkeyup="doIt(this.name, this.value)"></td>
<td valign="top" align="center">
<input TYPE="text" NAME="subtotal4" SIZE="6" value="0.00"></td>


Warning: I didn't debug this. And I havent shown converson from text-numbers or vice versa.

Final thoughts:rolleyes:
In Javascript array sizes change dynamically when you add new things. You don't have make it toooo big and don't have to keep track of how many items you have with a separate variable.

You could add a "breakpoint" property to your sales items parameters list. That way you can apply your discount price at different quantites for different items.

Where it looks for the item's name in the array, I should have temporarily put everything in upper case before I compare.

Some of my names are too much alike "saleItem & saleItems" and "totalSales & salesTotal". Doing this is generally a bad thing - as the number of my code fixes since I first posted this shows.

[Mr J]

You are right on a few accounts there RadarBob.
The scripts needs to be flexible in order to take in extra entries.

The one thing I find about forums is that you never know if the script you create is going to be too complicated for the person your trying to help to understand.

I just thought that by keeping the user information within the confines of HTML o0_Enigma_0o might have a better understanding.


Still I do like the direction your script is going and would like your permission to steal it and maybe build on it to include the text - numbers conversion and a couple of other things like VAT, Post and Packaging, etc.

I already have a couple of "Sales" examples on my site and this would be suitable as another variation.

[RadarBob]

Sure Mr J, you may use the code. Just payin' back what this forum has done for me!

One thing I noticed your code does is check whether or not a discount is offered - by checking if bulk =="N/A".

I think how the original code says "no discount offered" should be changed. "BULK" (breakpoint in my code) is a number; so don't put a string in there. Yes, I know that technically we're passing text that must be converted to a number. but we might want to use the "parsefloat()" function to convert text->number and "N/A" just makes things harder.

If we want to convey a special case, then use a special number. I think "-1" would work well. And in keeping with the spirit of objectness, the code additions might look like this:

function saleItem (....., pricebreak) {
this.breakpoint = pricebreak;
this.setDiscountFlag(); // creates and sets this.discountOffered
. . .
// new method
this.setDiscountFlag = setDiscountFlag;
}


function setDiscountFlag () {
switch (true) {
case this.breakpoint == -1:
this.discountOffered = new Boolean (false);
break;

case this.breakpoint >= 0:
this.discoutOffered = new Boolean (true);
break;

default:
this.discountOffered = null;
alert ("Invalid discount value: " + this.breakpoint +
"\n for Item: " + this.name);
break;
}// switch()
}// function setDiscountFlag()

function itemTotal() {
if ((this.quantity >= this.breakpoint) && (discountOffered)) (
// do the discount addition
}else{
// do the regular price addition
}
}//function itemTotal()


Notice the setDiscount() function does data validation on "breakpoint." For robust code probably each object property should be set through a function that does data validation. Additionally we don't check to see if the user is entering letters instead of numbers for quantity before we call function doIt().

Oh, and I noticed that this code is triggered by the ONKEYUP. What happens when the user tries to enter a two digit number? Probably ONCHANGE or ONBLUR would work better.

Finally we might want to create salesItem object methods for formatting numbers with two digits; much better than trying to do it in the middle of the adding function.

[RadarBob]

Originally posted by RadarBob
Finally we might want to create salesItem object methods for formatting numbers with two digits; much better than trying to do it in the middle of the adding function.

Duh, Javascript does this for us already.
http://developer.netscape.com/docs/manuals/js/core/jsref15/number.html#1193137