-1

Sorry if some of the code seems primitive. I'm currently a freshman in highschool taking computer programming for the first time. We have a project going on, and I'm trying to sort the alphabetically, and by price. It's all in document.write() because I'm making multiple pages. If anyone can help me, that'd be great. I've searched all over the internet, but have had no luck.

   <!DOCTYPE HTML>
        <html>
        <head>
        <link rel='stylesheet' type='text/css' href='index.css'>
    <script>
    var items[]
    function bSort(){
    document.getElementById("list").sort()
    }

    function welcome()
    {
    document.write("<h1 class='center' id='h'>WELCOME</h><img src='logo.gif' id='logo'>")
    document.write("<br><br><input type=button class='center' id='shop' value='Start Shopping!' onclick='startShop()'>")
    document.write("<link rel='stylesheet' type='text/css' href='index.css'>")
    document.write("<br><p id='contact'>Got a question? Contact us at: </p><a href='mailto:zhang5037@students.d211.org?subject=Help!' id='mail'>zhang5037@students.d211.org</a> ")
    document.close()
    }

    function startShop()
    {
    document.write("<link rel='stylesheet' type='text/css' href='index.css'>")
    document.write("<h1 class='center'>Santa's Workshop</h>")
    document.write("<div id='list'><div id='cCane'><img src='candycane.jpg' style='width:300px;height:228px'>Candy Cane<br>$1<br>A sweet treat for anyone to eat.</div>")
    document.write("<div id='cocoa'><img src='cocoa.jpg' style='width:300px;height:228px'>Cocoa<br>$1<br>A delight to warm the cold, blizzardy days.</div>")
    document.write("<div id='fakeSnow'><img src='fakesnow.jpg' style='width:300px;height:228px'>Fake Snow<br>$4.99<br>For those who want the feel of snow, but live in warm areas.</div>")
    document.write("<div id='hat'><img src='hat.jpg' style='width:300px;height:228px'>Santa Hat<br>$15<br>Want to (try to) look like Santa?</div>")
    document.write("<div id='ornament'><img src='ornament.jpg' style='width:300px;height:228px'>Tree Ornaments<br>$10<br>Decorate your Christmas tree.</div>")
    document.write("<div id='skis'><img src='skis.jpg' style='width:300px;height:228px'>Skis<br>$200<br>Slip and slide down peaks with these skis.</div>")
    document.write("<div id='snowballmaker'><img src='snowballmaker.jpg' style='width:300px;height:228px'>Snowball Maker<br>$6.99<br>Ever dream of making perfect snowballs?</div>")
    document.write("<div id='snowblower'><img src='snowblower.jpg' style='width:300px;height:228px'>Snowblower<br>$300<br>Easily blow away all that pesky snow on your driveway.</div>")
    document.write("<div id='snowBoots'><img src='snowboots.jpg' style='width:300px;height:228px'>Boots<br>$20<br>Keep your feet warm with these furry boots.</div>")
    document.write("<div id='snowCap'><img src='snowCap.jpg' style='width:300px;height:228px'>Snow Cap<br>$15<br>The freezing cold calls for a warm hat.</div>")
    document.write("<div id='snowPants'><img src='snowpants.jpg' style='width:300px;height:228px'>Snow Pants<br>$30<br>Keeps snow out of your boots.</div>")
    document.write("<div id='stockings'><img src='stockings.jpg' style='width:300px;height:228px'>Stockings<br>$4.99<br>Put your small gifts in these vibrant stockins.</div>")
    document.write("<div id='tree'><img src='tree.jpg' style='width:300px;height:228px'>Tree<br>$100<br>Celebrate your festivity with these fine fir trees.</div>")
    document.write("<div id='winterCoat'><img src='wintercoat.jpg' style='width:300px;height:228px'>Coat<br>$20<br>Make sure you stay warm with this cozy coat.</div>")
    document.write("<div id='wrappingPaper'><img src='wrappingpaper.jpg' style='width:300px;height:228px'>Wrapping Paper<br>$10<br>Surprise your friends and family with this decorative wrapping paper.</div>")
    document.write("<div id='imgNotAvailable'><img src='imgnotavailable.jpg' style='width:300px;height:228px'>???<br>???<br>(This item is currently not available)</div>")
    document.write("<div id='imgNotAvailable'><img src='imgnotavailable.jpg' style='width:300px;height:228px'>Not Available<br>$0<br>(This item is currently not available)</div></div>")
    document.write("<br><select value='Sort'><option>Make a selection</option><option>A-Z</option><option>Z-A</option><option>$-$$$</option><option>$$$-$</option></select><br><input type=button id='sort' onclick='bSort()' value='Sort'><p id='demo'></p>")
    }
    </script>
        </head>
        <body onload="welcome()">
        </body>
        </html>
  • 1
    document.write = BAD BAD practice. http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice – epascarello Dec 12 '14 at 03:18
  • Didn't realize, thanks. Too late to change it now though, it's due in a day or two... – Jiesahn Dec 12 '14 at 03:45
  • Problem is when you do the document.write after the page load it blows away the data that is there. That means any JS that was on the page is now gone. It is like walking up to a whiteboard and deleting everything. Second what is ".sort()" that is not part of the DOM as you have it. – epascarello Dec 12 '14 at 04:12

1 Answers1

0

I give an idea only as it is your work. You need an array to perform sorting, and then sort it ,finally print the result in order.

The KNVB
  • 1,972
  • 1
  • 19
  • 28