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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    What is wrong with this Javascript/Html?

    There is something in this javascript which is not allowing it to work at all.

    The buttons do not work (the check all button checks and quickly unchecks)
    the add item function doesn't work...

    I'm so new to javascript and i really need a push. Explaining what the problem was would really help me out


    var computer = new Array();

    computer[0] = "10001, Nvidia Geforce GTX 690, 1200";
    computer[1] = "10002, Raedon HD 7950, 450";
    computer[2] = "20001, Ivy Bridge i7 3770, 400";
    computer[3] = "20002, Ivy Bridge i7 3770k, 420";
    computer[4] = "20003, Sandy Bridge i7 2700k, 340";
    computer[5] = "20004, Bulldozer FX-8150, 270";
    computer[6] = "30001, Antec eleven-hundred, 120";
    computer[7] = "30002, Coolermaster HAF-X, 170";
    computer[8] = "30003, Antec three-hundred, 50";
    computer[9] = "30004, Corsair 550D, 160";
    computer[10] = "40001, INTEL-ASrock fatal1ty Z77 Professional Motherboard, 250";
    computer[11] = "40002, INTEL-ASrock Z77 extreme9 Motherboard, 350";
    computer[12] = "40003, AMD-ASrock fatal1ty 990FX Professional Motherboard, 240";
    computer[13] = "40004, AMD-ASUS Sabertooth 990FX Motherboard, 260";

    Check all checkboxes function

    function check() {

    var leftSide = document.getElementById('table_container_left');
    var inputs = leftSide.getElementsByTagName('input');
    for (x=0; x<=inputs.length-1; x++) {
    if(inputs[x].type == 'text') {
    inputs[x].value = 1;
    } else {
    inputs[x].checked = true;
    }
    }
    }

    Uncheck all checkboxes function

    function uncheck() {

    var leftSide = document.getElementById('table_container_left');
    var inputs = leftSide.getElementsByTagName('input');
    for (x=0; x<=inputs.length-1; x++) {
    if(inputs[x].type == 'text') {
    inputs[x].value = 0;
    } else {
    inputs[x].checked = false;
    }
    }
    }

    add checked items to cart

    function addItems() {
    var leftSide = document.getElementById('table_container_left');
    var rightSide = document.getElementById('table_container_right');
    var inputs = leftSide.getElementByTagName('input');
    var totalPrice = 0;
    var basketTable = "<h3>My Basket:</h3><table><thead><tr><th>Item</th><th>Quantity</th><th>price</th><th>Sub-total</th></tr></thead><tbody>";
    for (x=0; x<=inputs.length-1; x++) {
    if(inputs[x].type == 'checkbox' && inputs[x].checked == true) {
    var quantity = ParseFloat(inputs[x+1).value);
    var itemName = computer[x/2].split(",")[1];
    var itemPrice = parseFloat(computer[x/2].split(",")[2])
    var itemTotal = parseFloat(quantity*itemPrice);
    totalPrice += itemTotal;
    basketTable += "<tr><td>"+itemName+"</td><td>"+quantity+"</td><td>$"+itemPrice+"</td><td>$"+itemTotal+"</td></tr>";
    }
    }
    basketTable +=" <tr><td> colspan='3'><b>Total:</b></td><td><b>$"+totalPrice+"</b></td></tr></tbody><table>";
    rightsSide.innerHTML = basketTable;
    }

    update quantity to 1 when item is checked

    function updateQty(id) {

    var targetRow = document.getElementById(id);
    var qtyBox = targetRow.getElementsByTagName('input')[1];
    if (qtyBox.value == 0) {
    qtyBox.value = 1;
    } else {
    qtyBox.value = 0;
    }
    }

    Here's the HTML

    <form name="myForm" action="index.html" method="post">

    <div id="table_container_left">

    <button onclick="check();">Select All</button>

    <button onclick="uncheck();">Unselect All</button>

    <button onclick="addItems();">Add Items</button>

    <table>

    <thead>

    <th><u>Item Code</u></th>

    <th><u>Item</u></th>

    <th><u>Qty</u></th>

    <th><u>Price</u></th>

    </thead>

    <tbody>



    <script type="text/javascript">

    for(x=0; x<=computer.length-1; x++) {

    document.write("<tr id='"+x+"'><td><label><input type='checkbox' name='item' value='"+x+"' onclick='updateQty('"+x+"');'/> "+computer[x].split(",")[0]+"</label></td><td>"+computer[x].split (",")[1]+"</td><td> <input name='qty' id='qty' type='textbox' value='0' onchange='qtychange ('"+x+"');'/></td><td>$"+computer[x].split(",")[2]+"</td></tr>");

    }

    </script>







    </tbody>

    </table>

    </div>



    <div id="table_container_right">

    <table id="shoppingBasket">













    <input name='selectAll' type='button' value='Select All' onclick="itemSelected();"/>

    <input name='clearAll' type='button' value='Clear All' onclick=""/>

    <input name='removeItem(s)' type='button' value='Remove Item(s)' />

    <input name='sortItemCode' type='button' value='Sort by Item Code' disabled='disabled' />

    <input name='sortPrice' type='button' value='Sort by Price' disabled='disabled' />

    </tbody>

    </table>

    </div>



    </div>



    </form>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,982
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    When posting here please help us to help you by following the posting guidelines and wrapping your code in CODE tags. This means use the octothorpe or # button on the toolbar. You can (and should) edit your previous post.

    Have you tried using your error console? You can't expect people to wade through all that looking for syntax errors. Split the code down so as to test it in smaller chunks.

    It is your responsibility to die() if necessary….. - PHP Manual

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

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