Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Beginner question here; help appreciated

    Hi, I am new to programming and as I love the web and have HTML/CSS experience, I decided to begin programming in JS.

    I love messing around with code when I am doing tutorials but I frequently get stuck and need to ask questions. I have asked a ton of questions on stackoverflow but I find it difficult to track my posts there and its difficult to get to know people over there. It seems like different people help me each time. I signed up here so I could get help and hopefully, answer some questions that others may have!

    I was completed the JS tut on Codeacademy where we built a Cash Register. I tried to integrate the JS onto a website but I failed horribly. I started again because the Codeacademy code wasn't made to integrate with HTML input/output through the DOM.

    For the Cash Register/Till. I need to input items and price before I do any calcs. I am able to push items into an array, no problem, but when I try to make a 2D array so I can have [[item1, item2 ...], [price1, price2 ...]], it goes bonkers. Whilst I know I should be making an object for basket and a class constructor for fruits, I am more comfortable using arrays so I thought I'd begin there. Is my "pushing" all wrong?

    I know this is a very noob question but I dont think this will take long to answer, my code:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    </style>
    </head>
    <body>
    <p>Click the button to add a new fruit to the array.</p>
           <form action = ""><fieldset>
           <label>Type fruit: </label>
           <input type = "text"
                   id = "fruitName" />
    	   <label>Fruit price: </label>
           <input type = "text"
                   id = "fruitPrice" />
           <label>Fruit Number: </label>
           <input type = "text"
                   id = "fruitNo" />
           </fieldset></form>
    <div><p>
        <button onclick="addFruit()">Add fruit</button>
    	<button onclick="addPrice()">Add fruit price</button>
        <button onclick="showFruit()">Show fruit number</button>
    </p></div>
    <p id="demo"></p>
    <p id="demo2"></p>
    <p id="demo3"></p>
    <script>
    var fruitsBasket = [];
    var fruitsN = [];
    var fruitsP = [];
    document.getElementById("demo").innerHTML = fruits;
    
    function addFruit(){
        var fruitName = document.getElementById('fruitName');
        var fruitadded = fruitName.value;
        fruitsN.push(fruitadded);
    	fruitsBasket.push(fruitsN);
        document.getElementById("demo").innerHTML = fruitsBasket;
    }
    function addPrice(){
        var fruitPrice = document.getElementById('fruitPrice');
        var fruitPriceadded = fruitPrice.value;
        fruitsP.push(fruitPriceadded);
    	fruitsBasket.push(fruitsP);
        document.getElementById("demo2").innerHTML = fruitsBasket;
    }
    function showFruit(){
        var fruitN = document.getElementById('fruitNo');
        var fruitNo = parseInt(fruitN.value)-1;
        document.getElementById("demo3").innerHTML = fruitsN[fruitNo];
    }
    console.log(fruitsBasket[1]);
    console.log(fruitsBasket[2]);
    </script>
    
    </body>
    </html>

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts
    Welcome to the forum.

    I would suggest a change to the structure of your arrays.
    It appears to me you are trying to create a 'fruitB' (basket) of single 'fruitN' (names) with 'fruitP' (prices).
    Creating 3 separate arrays will lead to many headaches if the order of any of the arrays becomes un-synced,
    or if the displays of the baskets is ever put into sorted order.

    I would suggest creating one array with the names and prices as part of the basket number.
    I would also put in some error checks to assure that any of the user supplied information is not blank.

    All of the above suggestions are dependent upon my correct understanding of what you are trying to accomplish.\,
    which may not be the case.

  • #3
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jmrker View Post
    Welcome to the forum.
    I would suggest creating one array with the names and prices as part of the basket number.
    I would also put in some error checks to assure that any of the user supplied information is not blank.
    All of the above suggestions are dependent upon my correct understanding of what you are trying to accomplish.\,
    which may not be the case.
    jmrker, this is the case and your understanding is spot on.

    The array suggestion: Do you mean like:

    var basket = [ (name0, price0), (name1, price1) etc... ]

    Error checks, ie validation? So price, 2<= integer <0 . Name must not be null.

    Do I understand you correctly?

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,004
    Thanks
    79
    Thanked 4,434 Times in 4,399 Posts
    Almost. Better would be:
    Code:
    var basket = [];
    ...
    function Item( n, p )
    {
        this.name = n;
        this.price = p;
    }
    ...
    basket.push( new Item( "banana", 0.79 ) );
    ...
    Or you could pre-initialize the basket thus:
    [code]
    Code:
    function Item( n, p )
    {
        this.name = n;
        this.price = p;
    }
    ...
    var basket = [
        new Item( "bananas", 0.69 ),
        new Item( "T-bone steak", 9.95 ),
        new Item( "apricots", 2.49 )
    ];
    Now to use one of these items, you might do
    Code:
    var item = basket[3];
    document.getElementById("item").innerHTML = item.name;
    document.getElementById("price").innerHTML = item.price.toFixed(2);
    ...
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Old Penant, how would I make it so that the user can set new Items via forms?

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,004
    Thanks
    79
    Thanked 4,434 Times in 4,399 Posts
    Same idea.

    Code:
    <form id="iForm">
    Item: <input name="itemName"/>
    Price: <input name="itemPrice"/>
    <input type="button" name="addItem"/>
    </form>
    ...
    <script type="text/javascript">
    ... other code for basket goes here ...
    
    var inputForm = document.getElementById("iForm");
    inputForm.addItem.onclick = function( )
        {
            var n = inputForm.itemName.value;
            var p = Number(inputForm.itemPrice.value);
            // validate those values...this is crap validation but gives you the idea:
            if ( n.length > 3 && ! isNaN(p) )
            {
                basket.push( new Item(n,p) );
            }
        }
    </script>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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