/    Sign up×
Community /Pin to ProfileBookmark

Javascript Catalog

I’m a multimedia major and I don’t know much besides actionscript and we’re required to do a javascript project. Problem is it’s due tonight and I don’t know much about javascript. If someone can help me build the script for this I’d appreciate it.

Project: When your html page loads, it should present the user with a product image, two buttons (next, previous), a series of input components, a text description, a text product title, and a text price element. The elements should interoperate as follows:

  • 1.

    The Javascript code should include an array of objects, where each element in the array represents one item in the catalog.

  • 2.

    Each catalog item must have a product title, image URL, and text description.

  • 3.

    Each catalog item must also have some form of optional modification selections (size: S, M, L), color: red, white, black, etc.

  • 4.

    Each catalog item must have a price associated with each optional selection.

  • 5.

    When the catalog page is loaded, the first item in the catalog and all of its information should be displayed. The optional selection should initially default to the first option (S, red, etc.).

  • 6.

    When an item is displayed, the image must be displayed in the catalog IMG tag, the title and description text must be displayed in standard HTML components by modifying the .innerHTML property of a HTML element.

  • 7.

    When an item is displayed, the optional selections must be displayed in standard HTML components (checkboxes, select/option tags, etc.).

  • 8.

    When the optional selection is modified, the updated price information must be displayed in the appropriate HTML element.

  • 9.

    The two buttons (next, previous) should modify the catalog to view the next/previous item in the array. The catalog may stop at the ends of the list or wrap-around at the discretion of the implementer.

  • // This is what I have so far (not much) :

    <html>
    <head>
    <title>Catalogue</title>
    <script type=”text/javascript” language=”javascript”>
    <!–
    var pics = 0
    var pics = [“pics/pic1.jpg”, “pics/pic2.jpg”, “pics/pic3.jpg”, “pics/pic4.jpg”]

    function flip() {
    pic = (pic+1)%pics.length
    document.images[0].src = pics[pic]
    }
    –>
    </script>
    </head>

    <body>
    <img src=”pics/pic1.jpg” />
    <button onClick=”javascript:flip()”>Next</button>
    </body>
    </html>

    —Thank you in advance!

    to post a comment
    JavaScript

    1 Comments(s)

    Copy linkTweet thisAlerts:
    @purefanDec 06.2005 — Im sorry but I dont think it can be done for tonight (at least for me its already 7:25pm)

    Perhaps you'd be better off doing it in PHP accessing a MySql databse since it looks like there are far too many details to embed in a page.

    If you have no choice then I'd suggest you use (yes fellas! Im in love with) the InnerHtml property. If you know nothing about javascript then you could take a look at w3schools.com and learn the basics.

    I noticed the declaration of your array...Im not sure it'll work and instead I suggest using something similar to:
    [code=html]
    var ItemName= new Array(1);
    ItenName[0]="My First name";
    ItenName[1]="My second name";
    [/code]


    if you set all the content like this then you could get simply iterate over the files and arrays (even create an array to reference the other arrays and keep things tidy).

    for the price calculation you would need something like:
    [code=html]
    <input type="button" value="Calculate price" onClick="CalculatePrice(Size,Img);";>
    [/code]

    having of course defined the CalculatePrice(Size,Img) function before.

    Hope it helps...
    ×

    Success!

    Help @kaelyn_page spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 6.16,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @nearjob,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,
    )...