• Post Reply Bookmark Topic Watch Topic
  • New Topic

Array to store quantity and price  RSS feed

 
Daniel Martos
Ranch Hand
Posts: 126
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
In my original code, I use an onClick event to calculate the total of the items they choose to purchase.  Now I must use an array to store the quantities that they use in the boxes and the prices of the items and have a confirm message to display printing each item ordered, along with its quantity and total price.  I can't seem to do it.  Am I doing the array correctly?  How do I store the number of items that they chose in the array?  How do a do a function that will produce the confirm message prompted by a "Place Order" button?



Here is my original code:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type"
          content="text/html; charset=iso-8859-1" />
    <title>Classroom Connection</title>
<script language="javascript" type="text/javascript">
function calcTotal(productList) {
    var bulletinBoard = Number(productList.box1.value);
    var stickers = Number(productList.box2.value);
    var cutouts = Number(productList.box3.value);
    var trimmer = Number(productList.box4.value);
    var resourceBooks = Number(productList.box5.value);
    productList.total.value = 12 * bulletinBoard + 1 * stickers + 6 * cutouts + 3 * trimmer + 20 * resourceBooks;
}  
</script>
</head>
<body bgcolor="white">
    <p><center><font face="brush script mt" font size="250" color="#306754">Classroom Connection</font></center></p>
<h1>Customer Order Form</h1>
    <form action="classroomconnection.asp">
<!--Customer Information-->
        First Name:<input type="text" name="FirstName"><br>
        Last Name:<input type="text" name="LastName"><br>
        Street Address:<input type="text" name="StreetAddress"><br>
        City:<input type="text" name="City"><br>
        Zip Code:<input type="text" name="ZipCode"><br>
        Phone Number((123)-555-1234):<input type="text" name="PhoneNumber"><br>
<!--Add Products Here-->
<h2>Products</h2>
<h3>Choose Your Items</h3>
<!--To display products and calculate their total-->
    <script type="text/javascript" src="ProductDesc.js">
    /* <![CDATA[ */
    /* ]]> */
    </script>
    <!--added radio buttons-->
    <form name="productsList" action="" method="get">
        <p>Click the buttons for a description of each product.</p>
    <img src="BB1.jpeg" width="80" height="80" alt="Visual Formatting Element" />
    <input type="radio" name="products" onclick="window.alert(bulletinBoards)">
        <p>Bulletin Boards</p>
    <input type="text" size="3" maxlength="3" name="box1"><br>
    <img src="CDstickers1.jpeg" width="80" height="80" alt="Visual Formatting Element" />
    <input type="radio" name="products" onclick="window.alert(stickers)">
        <p>Stickers</p>
    <input type="text" size="3" maxlength="3" name="box2"><br>
    <img src="CDCutouts1.jpeg" width="80" height="80" alt="Visual Formatting Element" />
    <input type="radio" name="products" onclick="window.alert(cutouts)">
        <p>Cutouts</p>
    <input type="text" size="3" maxlength="3" name="box3"><br>
    <img src="CDTrimmer.jpeg" width="80" height="80" alt="Visual Formatting Element" />
    <input type="radio" name="products" onclick="window.alert(trimmers)">
        <p>Trimmer</p>
    <input type="text" size="3" maxlength="3" name="box4"><br>
    <img src="CDResourceBooks1.jpeg" width="80" height="80" name="box4" alt="Visual Formatting Element" />
     <input type="radio" name="products" onclick="window.alert(resourceBooks)"> 
        <p>Resource Books</p>
    <input type="text" size="3" maxlength="3" name="box5"><br>
    <input type="button" onClick="calcTotal(this.form)" value="Calculate Total">
    <input type="text" size="3" maxlength="3" name="total"><br>
    </form>
</form>
</body>
</html>
 
Daniel Martos
Ranch Hand
Posts: 126
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 66307
152
IntelliJ IDE Java jQuery Mac Mac OS X
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
First things first. Your code is hard to read because the indentation is wonky, and suggests structure where no structure exists. Line 2, for example should not be indented. Lines 3 through 8 should not be (double!) indented. And so on. Also suggest a blank line before the function to help it stand out.

That said, your syntax on lines 3 through 7 is wrong. Do you have the JavaScript console open while you run the page? That will show you any errors.

To create an object at an array index, the syntax would be:
The curly braces denote the object literal.

There are logic problems in the function, but we can get to that when you've gotten further along.
 
Daniel Martos
Ranch Hand
Posts: 126
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Let's discuss the function.  I need it to loop through the items and tell me the number of items that were ordered.
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 66307
152
IntelliJ IDE Java jQuery Mac Mac OS X
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Firstly, while is a poor choice. A while loop is best when the iteration is unbounded. In this case, you have an array with a finite length; what would be a better way?

Secondly, I assume you want to accumulate quantities. Review what ++ does and check if it's the right approach.

Then, never omit braces on compound statements. it's a poor practice than can cause issues when you least expect it.

And, why two arrays? What is the purpose of the second array?
 
Daniel Martos
Ranch Hand
Posts: 126
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Bear Bibeault wrote:Firstly, while is a poor choice. A while loop is best when the iteration is unbounded. In this case, you have an array with a finite length; what would be a better way?

Secondly, I assume you want to accumulate quantities. Review what ++ does and check if it's the right approach.

Then, never omit braces on compound statements. it's a poor practice than can cause issues when you least expect it.

And, why two arrays? What is the purpose of the second array?


Ok, my professor told me to create two arrays(one for price, one for quantity) so I did this.  When I click on the place order button it just pops up an alert window that literally prints out my function:

 
Daniel Martos
Ranch Hand
Posts: 126
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I should use a for loop?
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 66307
152
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Yes, a for loop wold be better.

If your instructor wants the values in separate arrays, you don't want to use the object approach that was earlier recommend. you should let us know about these types of artificial restrictions at the beginning.
 
Daniel Martos
Ranch Hand
Posts: 126
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Bear Bibeault wrote:Yes, a for loop wold be better.

If your instructor wants the values in separate arrays, you don't want to use the object approach that was earlier recommend. You should let us know about these types of artificial restrictions at the beginning.


She just told me right before I let you know.  How do you for loop through multiple arrays?
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 66307
152
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
The index of the for loop can be used to index into any number of arrays.
 
Daniel Martos
Ranch Hand
Posts: 126
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Bear Bibeault wrote:The index of the for loop can be used to index into any number of arrays.


Does this look correct to you?
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 66307
152
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Does it work?

Do you get any errors in the debugger console? (e.g. line 16)

You might also want to explore for a more succinct way to initialize an array.
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 66307
152
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Suggestion: arrays are plural. So perhaps the names should be as well?
 
Daniel Martos
Ranch Hand
Posts: 126
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Bear Bibeault wrote:Suggestion: arrays are plural. So perhaps the names should be as well?


I understand that you are trying to get me to "figure" this out on my own, but this is only my second semester and my first crack at JavaScript.  Maybe you think I should be further along, but my book isn't helping and I can't seem to google anything of relevance to help me, so I turned to you.  You in turn act like you're guarding the location of the holy grail.  I need help, not cryptic remarks that make me feel dumb for not having years of programming experience under my belt.
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 66307
152
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I'm not sure how suggesting that you use plural names for plural items is cryptic. Use prices when declaring an array of prices. Use quantities when declaring an array  of quantities. Pretty straightforward.

With regards to the  browser debugger, it's a necessary tool that you need to learn to use. It will show you, and tell you pretty explicitly, what's wrong with line 16.

But yes, the aim of the site is to help you along, not just give out the answers.

But you're really close! Don't give up now.
 
Daniel Martos
Ranch Hand
Posts: 126
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I 'm not mad at you, just extremely frustrated.  I'm proficient in math, but struggling with this.  Doesn't make sense to me.  You say I'm close, but I don't know where to go from here.  The clock is ticking on this assignment and I work 60 hours a week.  You can understand my frustration, yes?
 
Daniel Martos
Ranch Hand
Posts: 126
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Bear Bibeault wrote: I'm not sure how suggesting that you use plural names for plural items is cryptic. Use prices when declaring an array of prices. Use quantities when declaring an array  of quantities. Pretty straightforward.

With regards to the  browser debugger, it's a necessary tool that you need to learn to use. It will show you, and tell you pretty explicitly, what's wrong with line 16.

But yes, the aim of the site is to help you along, not just give out the answers.

But you're really close! Don't give up now.


Maybe I should use a different text editor, I don't understand this debugger(I'm on a mac using-brackets)
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 66307
152
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
The debugger is part of the browser, not of an editor. What browser are you using to debug? I recommend Chrome as I feel is has the best debugging tools. But all browsers will have a way to show you the JavaScript console.

It's Command-Option-J in Chrome to open the debugger pane. See https://developer.chrome.com/devtools

But as a hint: it looks like you reversed your assignment statement. Left hand side is the variable being assigned to.
 
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!