...

View Full Version : What is wrong with this Javascript/Html?



Hygeia
07-18-2012, 08:31 AM
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>

Philip M
07-18-2012, 09:48 AM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum