/    Sign up×
Community /Pin to ProfileBookmark

Help sumsubtotal function

Copy linkTweet thisAlerts:
Dec 24.2009

[B][U][COLOR=”Red”]Merry Xmas all[/COLOR][/U][/B]
Have ‘sumsubtotal’ function that is suposed to addup all the cost cells in a table and write the total to subtotal cell Unobtrusivley. This is what I have so far

[CODE]
function sumsubtotal(){
var cartitems=top.frames[‘register’].document.getElementsByClassName(‘itemrow’);
for(var sTotal=0.0, ad=1, cost; ad < cartitems.length; ad++)
{
cost=top.frames[‘register’].document.getElementsByClassName(‘cost’+ad);
sTotal += cost.innerHTML;
}
top.frames[‘register’].document.getElementById(‘subtotal’).innerHTML=parseFloat(sTotal).toFixed(2);
}

function addtocart() {
var aObj=document.getElementsByClassName(‘button’);
for(var i=0; i<aObj.length; i++) {
aObj[i].onclick=function() {insertItemRow(this);};
sumsubtotal();
}
};
[/CODE]

The original sTotal always writes to subtotal and ignores sTotal+=
Any assistance greatly appreciated.

to post a comment
JavaScript

36 Comments(s) ↴

Copy linkTweet thisAlerts:
@UltimaterDec 25.2009 — The faulty code is right here:
<i>
</i>cost=top.frames['register'].document.getElementsByClassName('cost'+ad);

document.getElementsByClassName is plural and hence returns a list.

So either add an [0] at the end of it like so:
<i>
</i>cost=top.frames['register'].document.getElementsByClassName('cost'+ad)[0];

Or switch to getElementById if you are actually using the wrong function and meant to reference by Id:
<i>
</i>cost=top.frames['register'].document.getElementById('cost'+ad);



When you pass this step in debugging you will also notice you meant to use parseFloat on the next line to add numbers rather than concentrate strings together.
<i>
</i>sTotal += parseFloat(cost.innerHTML);
Copy linkTweet thisAlerts:
@THEFOOLauthorDec 25.2009 — [B][U][COLOR="Red"]Merry Xmas Ultimater[/COLOR][/U][/B]

Ran this and subtotal turns out 0.00 like it's ignoring sTotal+= ??????????

[CODE]
function sumsubtotal(){
var cartitems=top.frames['register'].document.getElementsByClassName('itemrow');
for(var sTotal=0.0, ad=1, cost; ad < cartitems.length; ad++)
{
cost=top.frames['register'].document.getElementById('cost'+ad);
sTotal += parseFloat(cost.innerHTML);
}
top.frames['register'].document.getElementById('subtotal').innerHTML=sTotal.toFixed(2);
}
[/CODE]:mad: Could be get elements by id if the id element is already incremented by count +1 on insertItemRow???
getElementById('subtotal').innerHTML=sTotal returns 0 ?????????
Copy linkTweet thisAlerts:
@UltimaterDec 25.2009 — Perhaps you meant cost.value rather than cost.innerHTML.
Copy linkTweet thisAlerts:
@THEFOOLauthorDec 25.2009 — No [B][U][COLOR="Red"]Ultimater[/COLOR][/U][/B]

cost.value implies a text box input value but it is only a td?
Copy linkTweet thisAlerts:
@UltimaterDec 25.2009 — Do the tds all have a class of "cost" not cost1, cost2, cost3 or an id of cost1, cost2, cost3?

Then you would use something like:
<i>
</i>cost=top.frames['register'].document.getElementsByClassName('cost')[ad];


What does the HTML of the table look like?
Copy linkTweet thisAlerts:
@THEFOOLauthorDec 25.2009 — [B][COLOR="Red"]Ultimater[/COLOR][/B]

? I know what you mean about posting

This still writes subtotal 0.00

[CODE]
function sumsubtotal(){
var cartitems=top.frames['register'].document.getElementsByClassName('itemrow');
for(var sTotal=0.0, ad=1, cost; ad < cartitems.length; ad++)
{
cost=top.frames['register'].document.getElementsByClassName('cost')[ad];
sTotal += parseFloat(cost.innerHTML);
}
top.frames['register'].document.getElementById('subtotal').innerHTML=sTotal.toFixed(2);
}
[/CODE]:o
if I make the original var sTotal=125.0 then subtotal = 125.00 so sTotal+= is being ignored
Copy linkTweet thisAlerts:
@UltimaterDec 25.2009 — Can you show the HTML for the "register" frame?
Copy linkTweet thisAlerts:
@THEFOOLauthorDec 25.2009 — Maybe ('cost')[+ad]????????????
Copy linkTweet thisAlerts:
@UltimaterDec 25.2009 — Out of curiosity try:
<i>
</i>var cartitems=top.frames['register'].document.getElementsByClassName('itemrow');
alert(cartitems.length);
Copy linkTweet thisAlerts:
@THEFOOLauthorDec 25.2009 — [B][U][COLOR="Red"]Ultimater[/COLOR][/U][/B]

this is the register document called checkout.html?

[code=html]
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>checkout</title>
<link rel="stylesheet" type="text/css" href="styles/checkout.css" />

</head>

<body>

<embed src="sounds/lottery.wav" autostart="false" width="0" height="0" id="sound1" class="sound"
enablejavascript="true">
<embed src="sounds/cashdraw.wav" autostart="false" width="0" height="0" id="sound2"
enablejavascript="true">

<div id="content">

<div id="welcome">Welcome from Mexicali Rose!</div>

<div id="checkoutcontainer">

<div id="tablecontainer">

<table id="carttable" cellspacing="0" cellpadding="0">

<thead id="carthead">
<tr id="header" class="header">
<th id="headcode">Code</th>
<th id="headitem">Item</th>
<th id="headcolor">Color</th>
<th id="headsize">Size</th>
<th id="headprice">Item Price</th>
<th id="headquantity">Quantity</th>
<th id="headcost">Cost</th>
<th id="headtotal">Total</th>
<th id="headclear">Clear</th>
</tr>
</thead>

<tfoot id="cartfoot">
<tr id="footsubtotal">
<td class="add" colspan="4"></td>
<th class="col1" colspan="2" >Subtotal:</th>
<td id="subtotal" class="col2" colspan="1">0.00</td>
<td class="add" colspan="2"></td>
</tr>

<tr id="footshipping">
<td class="add" colspan="4"></td>
<th class="col1" colspan="2">Handling:</th>
<td id="handling"class="col2" colspan="1">0.00</td>
<td class="add" colspan="2"></td>
</tr>

<tr id="foottax">
<td class="add" colspan="4"></td>
<th class="col1" colspan="2">Tax:</th>
<td id="tax" class="col2" colspan="1">0.00</td>
<td class="add" colspan="2"></td>
</tr>

<tr id="foottotal">
<td id="date" class="date" colspan="4">Monday October 6th 2009</td>
<th class="col1" colspan="2">Order Total:</th>
<td id="total" class="col2" colspan="1">22,434.15</td>
<td id="ordernumber" class="ordernumber" colspan="2">100</td>
</tr>
</tfoot>

<tbody id="cartbody">

<tr id="dumy" class="dumy">
<td id="clientmessage" class="clientmessage" colspan="9">Are you ready to shop?</td></tr>

</tbody>

</table>

</div>

<!--end of #tablecontainer-->
<a id="login" name="login"></a>
<div id="checkoutcontainer">

<form id="formcheckout" method="post" action="/v/0.4.0/checkout.php" onsubmit="return false;">
*/ A lot more stuff here*/

</div>

<!--end of content-->

<script src="checkout.js" type="text/javascript" charset="utf-8"></script>

</body >
</html>

[/code]

?Might move the table into the form. I'm trying to avoid post backs to server.
Copy linkTweet thisAlerts:
@UltimaterDec 25.2009 — I don't see a single element on that page with a class of "itemrow" or "cost".
Copy linkTweet thisAlerts:
@THEFOOLauthorDec 25.2009 — Yeh it's unobtrusive, the style is in this pages external css and the class for cost is written in the insertItemRow function of the productpage in 'display' window above register. Maybe I should post the external js with the sumsubtotal script. Forum rules, no more than 1,000 words per post. so I'll just post the relevant script
<i>
</i>function sumsubtotal(){
var cartitems=top.frames['register'].document.getElementsByClassName('itemrow');
for(var sTotal=0.0, ad=1, cost; ad &lt; cartitems.length; ad++)
{
cost=top.frames['register'].document.getElementsByClassName('cost')[ad];
sTotal += parseFloat(cost.innerHTML);
}
top.frames['register'].document.getElementById('subtotal').innerHTML=sTotal.toFixed(2);
}

function addtocart() {
var aObj=document.getElementsByClassName('button');
for(var i=0; i&lt;aObj.length; i++) {
aObj[i].onclick=function() {insertItemRow(this);};
sumsubtotal();
}
};

function insertItemRow(button){
var carttable = top.frames['register'].document.getElementById('carttable');
var cartbody = top.frames['register'].document.getElementById('cartbody');
var lastrow = cartbody.rows.length;
var count = lastrow;
var cartfoot = top.frames['register'].document.getElementById('cartfoot');
var clientmessage = top.frames['register'].document.getElementById('clientmessage');
var subtotal = top.frames['register'].document.getElementById('subtotal');

var addrowsound = document.getElementById('sound2');
var fs=button.parentNode.parentNode;
var q=fs.getElementsByTagName('select')[2].value;
if(q!='' || q!=0) {
var code = fs.getElementsByTagName('input')[0].value;
var item = fs.getElementsByTagName('input')[1].value;
var color = fs.getElementsByTagName('select')[0].value;
var size = fs.getElementsByTagName('select')[1].value;
var price = fs.getElementsByTagName('input')[2].value;
var quantity = fs.getElementsByTagName('select')[2].value;
var val = [[quantity],[price]];
var multiply = 0;
multiply+= (val[0]*val[1]);

var cartitems=top.frames['register'].document.getElementsByClassName('itemrow').length;
cartitems+= +1;
var itemrow=cartbody.insertRow(0);
itemrow.setAttribute('id','itemrow'+count);
itemrow.setAttribute('title','The last item of '+cartitems+' that you have ordered.');
itemrow.className='itemrow';

var addcode=itemrow.insertCell(0);
addcode.setAttribute('id','code'+count);
addcode.className='code';
addcode.appendChild(document.createTextNode(code));

var additem=itemrow.insertCell(1);
additem.setAttribute('id','item'+count);
additem.className='item';

var additemlink=top.frames['register'].document.createElement('a');
additemlink.setAttribute('id','itemlink'+count);
additemlink.setAttribute('href','zanfeld/p'+code+'.jpg');
additemlink.setAttribute('target','display');
additemlink.setAttribute('title','Review this item then click your back button to return');
additemlink.className='itemlink';
additemlink.appendChild(document.createTextNode(item));
additem.appendChild(additemlink);

var addcolor=itemrow.insertCell(2);
addcolor.setAttribute('id','color'+count);
addcolor.className='color';
addcolor.appendChild(document.createTextNode(color));

var addsize=itemrow.insertCell(3);
addsize.setAttribute('id','size'+count);
addsize.className='size';
addsize.appendChild(document.createTextNode(size));

var addprice=itemrow.insertCell(4);
addprice.setAttribute('id','price'+count);
addprice.className='price';
addprice.appendChild(document.createTextNode(price));

var addquantity=itemrow.insertCell(5);
addquantity.setAttribute('id','quantity'+count);
addquantity.className='quantity';
addquantity.appendChild(document.createTextNode(quantity));

var addcost=itemrow.insertCell(6);
addcost.setAttribute('id','cost'+count);
addcost.setAttribute('title','The cost of the quantity of this item.');
[B][U][COLOR="Red"]addcost.className='cost';[/COLOR][/U][/B]
addcost.appendChild(document.createTextNode(multiply.toFixed(2)));


var addsubtotal=itemrow.insertCell(7);
addsubtotal.setAttribute('id','subtotal'+count);
addsubtotal.setAttribute('title','The total cost of your order.');
addsubtotal.className='col2';
addsubtotal.appendChild(document.createTextNode('0.00'));

var addclear=itemrow.insertCell(8);
addclear.setAttribute('id','clear'+count);
addclear.className='clear';
addclear.setAttribute('align','center');

var addremoveitem=top.frames['register'].document.createElement('a');
addremoveitem.setAttribute('id','removeitem'+count);
addremoveitem.className='removeitem';
addremoveitem.setAttribute('title','Remove this item');
addremoveitem.appendChild(document.createTextNode('[x]'));
addremoveitem.onclick=function(){removeRow(this);};

addclear.appendChild(addremoveitem);

clientmessage.innerHTML='Thank You Joe for Shopping Mexicali Rose';
var x,y;
if (self.innerHeight) // all except Explorer
{
x = self.innerWidth;
y = self.innerHeight;
}
else if (document.documentElement &amp;&amp; document.documentElement.clientHeight)
{
x = document.documentElement.clientWidth;
y = document.documentElement.clientHeight;
}
else if (document.body) // other Explorers
{
x = document.body.clientWidth;
y = document.body.clientHeight;
}
window.scrollBy(0,y);
}

else {
alert('Please enter a Quantity for this item');
button.parentNode.parentNode.getElementsByTagName('select')[2].focus();
}
}


function removeRow(a) {
// remove row
var row=a.parentNode.parentNode;
row.parentNode.removeChild(row);
// reset article?????
}

function start(){hidewelcome();rowheight();fixheader();showdumy();addtocart();}
var alreadyrun = false;
window.onload = function() {if (alreadyrun) {return;}alreadyrun = true;start();}


The relevant class name is highlited. Also note that each Id is incremented by count.
Copy linkTweet thisAlerts:
@UltimaterDec 25.2009 — Try this:
<i>
</i>function sumsubtotal(){
var cartitems=top.frames['register'].document.getElementsByClassName('itemrow');
var debugLog="Debug Details:n"+cartitems.length;
for(var sTotal=0, i=0, cost; i &lt; cartitems.length; i++)
{
cost=cartitems[i].getElementsByClassName('cost');
debugLog+="n"+cost.length;
if(cost.length){sTotal += parseFloat(cost[0].innerHTML);}
}
top.frames['register'].document.getElementById('subtotal').innerHTML=sTotal.toFixed(2);
alert(debugLog);
}
Copy linkTweet thisAlerts:
@THEFOOLauthorDec 25.2009 — No the debug fires before a row can be entered and alerts 0 repetivley.

Thanks for the debug technic though, another method to the madness
Copy linkTweet thisAlerts:
@THEFOOLauthorDec 25.2009 — [B][U][COLOR="Red"]Ultimater[/COLOR][/U][/B]

I don't know why it's ignoring sTotal+= but cost;ad must have something to do with it?

Back to this, sTotal+= being ignored and subtotal written 0.00

<i>
</i>function sumsubtotal(){
var cartitems=top.frames['register'].document.getElementsByClassName('itemrow');
for(var sTotal=0.0, ad=1, cost; ad &lt; cartitems.length; ad++)
{
cost=top.frames['register'].document.getElementById('cost'+ad);
sTotal += parseFloat(cost.innerHTML);
}
top.frames['register'].document.getElementById('subtotal').innerHTML=sTotal.toFixed(2);
}
Copy linkTweet thisAlerts:
@UltimaterDec 25.2009 — It seems sumsubtotal() is being called before the elements in the frame are written via onclick since the for loop is never ran even once.

How about:
<i>
</i>function sumsubtotal(){
var cartitems=top.frames['register'].document.getElementsByClassName('itemrow');
var debugLog="Debug Details:n"+cartitems.length;
for(var sTotal=0, i=0, cost; i &lt; cartitems.length; i++)
{
cost=cartitems[i].getElementsByClassName('cost');
debugLog+=","+cost.length;
if(cost.length){sTotal += parseFloat(cost[0].innerHTML);}
}
top.frames['register'].document.getElementById('subtotal').innerHTML=sTotal.toFixed(2);
if(!window.debugLog)window.debugLog=new Array();
window.debugLog.push(debugLog);
}

function addtocart() {
var aObj=document.getElementsByClassName('button');
for(var i=0; i&lt;aObj.length; i++) {
aObj[i].onclick=function() {insertItemRow(this);sumsubtotal();};
}
if(window.debugLog)alert(window.debugLog.join("n"))
else alert('window.debugLog not defined');
}
Copy linkTweet thisAlerts:
@THEFOOLauthorDec 25.2009 — Hey maybe we should just check cartitems.length>0 before running sumsubtotal or can we do it in sumsubtotal with an if statement like you have in the debug. Actualy the sumsubtotal is called with the onclick addtocart and maybe it should be called at the end of the insertItemRow called by addtocart. Thouht I had tried that the other day. Will run it again. After all 'if cartitems.length>0 sTotal+= might miss the first row[0]??
Copy linkTweet thisAlerts:
@THEFOOLauthorDec 25.2009 — [B][U]Ultimater[/U][/B]

Sorry The guests have arrived got to make an apperance.

Merry Xmas. Will check back latter.
Copy linkTweet thisAlerts:
@UltimaterDec 27.2009 — Yes it would make the most sense to stick it in insertItemRow.
Copy linkTweet thisAlerts:
@THEFOOLauthorDec 27.2009 — [B][U][COLOR="Red"]Ultimater[/COLOR][/U][/B]

I checked and realized that each row had a cell Id 'subtotal'+count so I changed that to 'rowsubtotal'+count. The 'subtotal' that I'm trying to change with every inserted row is in cell[6] of the first footer row. Cell[7] is 'rowsubtotal' and reads from 'subtotal'. Still no sTotal+= recognized.

Then I added alert (cartitems) at the end of 'insertitemrow' function because cartitems was already defined in 'insertitemrow' as a length property and presumably the script fires in order? It shows up undefined.:mad:

Actualy I'm realizing I took out var sTotal= ''; from 'insertitemrow' which could be the problem? This is the relevant script now.

[CODE]
function sumsubtotal(){
var cartitems=top.frames['register'].document.getElementsByClassName('itemrow');
for(var sTotal=0.0, ad=1, cost; ad < cartitems.length; ad++)
{
cost=top.frames['register'].document.getElementsByClassName('cost'+ad);
sTotal += cost.innerHTML;
}
top.frames['register'].document.getElementById('subtotal').innerHTML=parseFloat(sTotal).toFixed(2);
}

function addtocart() {
var aObj=document.getElementsByClassName('button');
for(var i=0; i<aObj.length; i++) {
aObj[i].onclick=function() {insertItemRow(this);};
sumsubtotal();
}
};

function insertItemRow(button){
var carttable = top.frames['register'].document.getElementById('carttable');
var cartbody = top.frames['register'].document.getElementById('cartbody');
var lastrow = cartbody.rows.length;
var count = lastrow;
var cartfoot = top.frames['register'].document.getElementById('cartfoot');
var clientmessage = top.frames['register'].document.getElementById('clientmessage');
var subtotal = top.frames['register'].document.getElementById('subtotal');

var addrowsound = document.getElementById('sound2');
var fs=button.parentNode.parentNode;
var q=fs.getElementsByTagName('select')[2].value;
if(q!='' || q!=0) {
var code = fs.getElementsByTagName('input')[0].value;
var item = fs.getElementsByTagName('input')[1].value;
var color = fs.getElementsByTagName('select')[0].value;
var size = fs.getElementsByTagName('select')[1].value;
var price = fs.getElementsByTagName('input')[2].value;
var quantity = fs.getElementsByTagName('select')[2].value;
var val = [[quantity],[price]];
var multiply = 0;
multiply+= (val[0]*val[1]);

var cartitems=top.frames['register'].document.getElementsByClassName('itemrow').length;
cartitems+= +1;
var itemrow=cartbody.insertRow(0);
itemrow.setAttribute('id','itemrow'+count);
itemrow.setAttribute('title','The last item of '+cartitems+' that you have ordered.');
itemrow.className='itemrow';

var addcode=itemrow.insertCell(0);
addcode.setAttribute('id','code'+count);
addcode.className='code';
addcode.appendChild(document.createTextNode(code));

var additem=itemrow.insertCell(1);
additem.setAttribute('id','item'+count);
additem.className='item';

var additemlink=top.frames['register'].document.createElement('a');
additemlink.setAttribute('id','itemlink'+count);
additemlink.setAttribute('href','zanfeld/p'+code+'.jpg');
additemlink.setAttribute('target','display');
additemlink.setAttribute('title','Review this item then click your back button to return');
additemlink.className='itemlink';
additemlink.appendChild(document.createTextNode(item));
additem.appendChild(additemlink);

var addcolor=itemrow.insertCell(2);
addcolor.setAttribute('id','color'+count);
addcolor.className='color';
addcolor.appendChild(document.createTextNode(color));

var addsize=itemrow.insertCell(3);
addsize.setAttribute('id','size'+count);
addsize.className='size';
addsize.appendChild(document.createTextNode(size));

var addprice=itemrow.insertCell(4);
addprice.setAttribute('id','price'+count);
addprice.className='price';
addprice.appendChild(document.createTextNode(price));

var addquantity=itemrow.insertCell(5);
addquantity.setAttribute('id','quantity'+count);
addquantity.className='quantity';
addquantity.appendChild(document.createTextNode(quantity));

var addcost=itemrow.insertCell(6);
addcost.setAttribute('id','cost'+count);
addcost.setAttribute('title','The cost of the quantity of this item.');
addcost.className='cost';
addcost.appendChild(document.createTextNode(multiply.toFixed(2)));


var addsubtotal=itemrow.insertCell(7);
addsubtotal.setAttribute('id','rowsubtotal'+count);
addsubtotal.setAttribute('title','The total cost of your order.');
addsubtotal.className='col2';
addsubtotal.appendChild(document.createTextNode(parseFloat(subtotal.innerHTML).toFixed(2)));

var addclear=itemrow.insertCell(8);
addclear.setAttribute('id','clear'+count);
addclear.className='clear';
addclear.setAttribute('align','center');

var addremoveitem=top.frames['register'].document.createElement('a');
addremoveitem.setAttribute('id','removeitem'+count);
addremoveitem.className='removeitem';
addremoveitem.setAttribute('title','Remove this item');
addremoveitem.appendChild(document.createTextNode('[x]'));
addremoveitem.onclick=function(){removeRow(this);};

addclear.appendChild(addremoveitem);

alert (cartitems);

clientmessage.innerHTML='Thank You Joe for Shopping Mexicali Rose';
var x,y;
if (self.innerHeight) // all except Explorer
{
x = self.innerWidth;
y = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight)
{
x = document.documentElement.clientWidth;
y = document.documentElement.clientHeight;
}
else if (document.body) // other Explorers
{
x = document.body.clientWidth;
y = document.body.clientHeight;
}
window.scrollBy(0,y);
}

else {
alert('Please enter a Quantity for this item');
button.parentNode.parentNode.getElementsByTagName('select')[2].focus();
}
}


function removeRow(a) {
// remove row
var row=a.parentNode.parentNode;
row.parentNode.removeChild(row);
// reset article?????
}

function start(){hidewelcome();rowheight();fixheader();showdumy();addtocart();}
var alreadyrun = false;
window.onload = function() {if (alreadyrun) {return;}alreadyrun = true;start();}
[/CODE]
Copy linkTweet thisAlerts:
@THEFOOLauthorDec 27.2009 — [B][U][COLOR="Red"]Ultimater[/COLOR][/U][/B]
top.frames.register.document.getElementById('subtotal') = 'test value';
Is used for Text boxes etc. not td's. I get error Wrong number of arguments or invalid property assignment.

Do spans return 'values'????????? Correct syntax for td should be 'test subtotal.firstChild.data' right?

I also checked that var sTotal=''; is no longer declared in 'insertitemrow' and that might be a cause.
Copy linkTweet thisAlerts:
@THEFOOLauthorDec 27.2009 — [B][U][COLOR="Red"]Ultimater[/COLOR][/U][/B]

Ok. I put this at the end of 'insertitemrow'. it alerts the no. of rows correctly and then alerts subtotal as 0.00132.0 but the subtotal td data remains 0.00.

This implies that the td data in the HTML of subtotal should be blank from the getgo and not 0.00:eek:
[CODE]
alert (cartitems);
alert(subtotal.innerHTML+ad);
[/CODE]
Copy linkTweet thisAlerts:
@UltimaterDec 27.2009 — [B][U][COLOR="Red"]Ultimater[/COLOR][/U][/B]
top.frames.register.document.getElementById('subtotal') = 'test value';
Is used for Text boxes etc. not td's. I get error Wrong number of arguments or invalid property assignment.

Do spans return 'values'????????? Correct syntax for td should be 'test subtotal.firstChild.data' right?

I also checked that var sTotal=''; is no longer declared in 'insertitemrow' and that might be a cause.[/QUOTE]
Yes that should be:
top.frames.register.document.getElementById('subtotal').firstChild.data = 'test value';
Copy linkTweet thisAlerts:
@THEFOOLauthorDec 27.2009 — [B][U][COLOR="Red"]Ultimater[/COLOR][/U][/B]

This proves that sTotal+= isn't recognized as subtotal td data shows up 250.00
[CODE]
function sumsubtotal(){
var cartitems=top.frames['register'].document.getElementsByClassName('itemrow');
var colRows=cartitems.length;
var sTotal=250.0;
for(var i=0; i < colRows; i++)
{
var oRow=colRows[i];
var oCell=oRow.cells[6];
sTotal+=oCell.innerHTML;
}
top.frames['register'].document.getElementById('subtotal').innerHTML=parseFloat(sTotal).toFixed(2);
}
[/CODE]
Copy linkTweet thisAlerts:
@UltimaterDec 28.2009 — change:
<i>
</i>var oRow=colRows[i];

to:
<i>
</i>var oRow=cartitems[i];
Copy linkTweet thisAlerts:
@THEFOOLauthorDec 28.2009 — [B][U][COLOR="Red"]Ultimater[/COLOR][/U][/B]

hey I got it working yesterday. I had to add a refrence to sumsubtotal in insertitemrow and I changed some bits of the sumsubtotal function itself.

[B][U][COLOR="Red"]Problem though[/COLOR][/U][/B] The 'register' window is only 2 rows deep so that with a frozen header and scrollable table the insertitemrow is to row[0]. 'rowsubtotal' cell[7] equals 'subtotal.innerHTML' at the time it was written. If you delete any rows inbetween 0 and last the 'rowsubtotal' cells are not altered.

[COLOR="Red"]I need every rows cell[7] to change when the subtotal.innerHTML changes and I hope It dosen't involve addevent listner:p[/COLOR]

I'll past the relevant code in a second.
Copy linkTweet thisAlerts:
@THEFOOLauthorDec 28.2009 — [B][U][COLOR="Red"]Ultimater[/COLOR][/U][/B]

Hey this is the code that needs adjusting. I'm going to change it up a bit so for in loop of sumsubtotal looks more like the one I origialy posted. I like the syntax because it's easier to understand. I got it from [B][U][COLOR="Red"]pmw57[/COLOR][/U][/B] at [COLOR="Blue"]SitePoint.COM[/COLOR]. The only thing you both didn't catch was that the sumsubtotal had to be refrenced in the insertitemrow. I highlighted that refrence in this snippet:
[CODE]
function sumsubtotal(){
var cartitems=top.frames['register'].document.getElementsByClassName('itemrow');
var colRows=cartitems;
var subtotal=top.frames['register'].document.getElementById('subtotal');
var sTotal=0.0;
for(var i=0; i < colRows.length; i++)
{
var oRow=colRows[i];
var oCell=oRow.cells[6];
sTotal += Number(oCell.innerHTML) || 0;
}
subtotal.innerHTML=parseFloat(sTotal).toFixed(2);
}

function addtocart() {
var aObj=document.getElementsByClassName('button');
for(var i=0; i<aObj.length; i++) {
aObj[i].onclick=function() {insertItemRow(this);};
sumsubtotal();
}
};

function insertItemRow(button){
var carttable = top.frames['register'].document.getElementById('carttable');
var cartbody = top.frames['register'].document.getElementById('cartbody');
var lastrow = cartbody.rows.length;
var count = lastrow;
var cartfoot = top.frames['register'].document.getElementById('cartfoot');
var clientmessage = top.frames['register'].document.getElementById('clientmessage');
var subtotal = top.frames['register'].document.getElementById('subtotal');

var addrowsound = document.getElementById('sound2');
var fs=button.parentNode.parentNode;
var q=fs.getElementsByTagName('select')[2].value;
if(q!='' || q!=0) {
var code = fs.getElementsByTagName('input')[0].value;
var item = fs.getElementsByTagName('input')[1].value;
var color = fs.getElementsByTagName('select')[0].value;
var size = fs.getElementsByTagName('select')[1].value;
var price = fs.getElementsByTagName('input')[2].value;
var quantity = fs.getElementsByTagName('select')[2].value;
var val = [[quantity],[price]];
var multiply = 0;
multiply+= (val[0]*val[1]);
var sTotal='';

var cartitems=top.frames['register'].document.getElementsByClassName('itemrow').length;
cartitems+= +1;
var itemrow=cartbody.insertRow(0);
itemrow.setAttribute('id','itemrow'+count);
itemrow.setAttribute('title','The last item of '+cartitems+' that you have ordered.');
itemrow.className='itemrow';

var addcode=itemrow.insertCell(0);
addcode.setAttribute('id','code'+count);
addcode.className='code';
addcode.appendChild(document.createTextNode(code));

var additem=itemrow.insertCell(1);
additem.setAttribute('id','item'+count);
additem.className='item';

var additemlink=top.frames['register'].document.createElement('a');
additemlink.setAttribute('id','itemlink'+count);
additemlink.setAttribute('href','zanfeld/p'+code+'.jpg');
additemlink.setAttribute('target','display');
additemlink.setAttribute('title','Review this item then click your back button to return');
additemlink.className='itemlink';
additemlink.appendChild(document.createTextNode(item));
additem.appendChild(additemlink);

var addcolor=itemrow.insertCell(2);
addcolor.setAttribute('id','color'+count);
addcolor.className='color';
addcolor.appendChild(document.createTextNode(color));

var addsize=itemrow.insertCell(3);
addsize.setAttribute('id','size'+count);
addsize.className='size';
addsize.appendChild(document.createTextNode(size));

var addprice=itemrow.insertCell(4);
addprice.setAttribute('id','price'+count);
addprice.className='price';
addprice.appendChild(document.createTextNode(price));

var addquantity=itemrow.insertCell(5);
addquantity.setAttribute('id','quantity'+count);
addquantity.className='quantity';
addquantity.appendChild(document.createTextNode(quantity));

var addcost=itemrow.insertCell(6);
addcost.setAttribute('id','cost'+count);
addcost.setAttribute('title','The cost of the quantity of this item.');
addcost.className='cost';
addcost.appendChild(document.createTextNode(multiply.toFixed(2)));
[B][U][COLOR="Red"]var j =sumsubtotal();[/COLOR][/U][/B]
var addsubtotal=itemrow.insertCell(7);
addsubtotal.setAttribute('id','rowsubtotal'+count);
addsubtotal.setAttribute('title','The total cost of your order with this item.');
addsubtotal.className='col2';
addsubtotal.appendChild(document.createTextNode(subtotal.innerHTML));//returns sumsubtotal value

var addclear=itemrow.insertCell(8);
addclear.setAttribute('id','clear'+count);
addclear.className='clear';
addclear.setAttribute('align','center');

var addremoveitem=top.frames['register'].document.createElement('a');
addremoveitem.setAttribute('id','removeitem'+count);
addremoveitem.className='removeitem';
addremoveitem.setAttribute('title','Remove this item');
addremoveitem.appendChild(document.createTextNode('[x]'));
addremoveitem.onclick=function(){removeRow(this);sumsubtotal();};

addclear.appendChild(addremoveitem);

clientmessage.innerHTML='Thank You Joe for Shopping Mexicali Rose';
var x,y;
if (self.innerHeight) // all except Explorer
{
x = self.innerWidth;
y = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight)
{
x = document.documentElement.clientWidth;
y = document.documentElement.clientHeight;
}
else if (document.body) // other Explorers
{
x = document.body.clientWidth;
y = document.body.clientHeight;
}
window.scrollBy(0,y);
}

else {
alert('Please enter a Quantity for this item');
button.parentNode.parentNode.getElementsByTagName('select')[2].focus();
}
}

function removeRow(a) {
// remove row
var row=a.parentNode.parentNode;
row.parentNode.removeChild(row);

// reset article?????
}

function start(){hidewelcome();rowheight();fixheader();showdumy();addtocart();}
var alreadyrun = false;
window.onload = function() {if (alreadyrun) {return;}alreadyrun = true;start();}
[/CODE]:rolleyes:
Copy linkTweet thisAlerts:
@THEFOOLauthorDec 28.2009 — [B][U][COLOR="Red"]Ultimater[/COLOR][/U][/B]

It looks like I need a parentNode.parentNode.previousSibling syntax that refrences 'rowsubtotal.cell[7]' in row[0] In 'removeRow'. This is what I've got but it dosen't change the 'rowsubtotal' cell[7]innerHTML in row[0] when I delete any of the other rows?

[CODE]
function sumsubtotal(){
var cartitems=top.frames['register'].document.getElementsByClassName('itemrow');
var rowsubtotal=top.frames['register'].document.getElementsByClassName('rowsubtotal');
var colRows=cartitems;
var subtotal=top.frames['register'].document.getElementById('subtotal');
var sTotal=0.0;
for(var i=0; i < colRows.length; i++)
{
var oRow=colRows[i];
var oCell=oRow.cells[6];
var oCell2=oRow.cells[7];//refrence subtotal
rowsubtotal+=oCell2;//get to write to one????????
sTotal += Number(oCell.innerHTML) || 0;
}
subtotal.innerHTML=parseFloat(sTotal).toFixed(2);
rowsubtotal.innerHTML=parseFloat(sTotal).toFixed(2);
}
function removeRow(a) {
// remove row
var row=a.parentNode.parentNode;
row.parentNode.removeChild(row);
var j=sumsubtotal(this.rowsubtotal);//dosen't change all cells[7]
}
[/CODE]
Copy linkTweet thisAlerts:
@UltimaterDec 28.2009 — I can hardly follow your changes, it would be nice if you just attached a zip with everything, all the files, so I can recreate your situation and debug from my end too rather than having to suggest a handful of changes...

Although these suggestions might be tiny, the list is big:

  • 1. You shouldn't be using getElementsByClassName to begin with, it isn't cross-browser as of yet and shouldn't be used on the web any time soon. It would make more sense to use getElementsByTagName in its place and looping through the results if necessary.


  • 2. The insertItemRow function spans too many lines of code, functions, as a general rule, should always fit onto one screen so you can follow them.

    You can break a function down into smaller parts such as:
    <i>
    </i>function insertRowAt(e,x)
    var l=e.rows.length?(e.rows[0].cells.length||1):1;
    var r=e.insertRow(x);
    for(var i=0;i&lt;l;i++)r.insertCell(i);
    return r;
    }



  • 3. You shouldn't be trying to access top.frames['register'] merely to loop through a bunch of elements in the frame if you could create the function within the frame itself and merely call it, if necessary, with a single call such as: top.frames['register'].recalculateTotals()


  • 4. You shouldn't be assigning each element in the row a unique ID. Assigning IDs to elements dynamically is usually a no-no from a JS perspective although sometimes you need to give them an ID for CSS selectors, but this too can be avoided, surely if you can't even select these elements by ID cross-browser (IE has issues with elements created dynamically and getElementById) then you shouldn't be giving each element an ID with an incremental number appended to the end. JS is equip with enough ways to access these elements with or without IDs.


  • 5. sTotal += cost.innerHTML;

    should be:

    sTotal += new Number(cost.innerHTML);


  • 6. the addtocart() logic is flawed to begin with. The function insertItemRow shouldn't have to calculate input logic such as:
    <i>
    </i>var carttable = top.frames['register'].document.getElementById('carttable');
    var cartbody = top.frames['register'].document.getElementById('cartbody');
    var lastrow = cartbody.rows.length;
    var count = lastrow;
    var cartfoot = top.frames['register'].document.getElementById('cartfoot');
    var clientmessage = top.frames['register'].document.getElementById('clientmessage');
    var subtotal = top.frames['register'].document.getElementById('subtotal');

    var addrowsound = document.getElementById('sound2');
    var fs=button.parentNode.parentNode;
    var q=fs.getElementsByTagName('select')[2].value;
    if(q!='' || q!=0) {
    var code = fs.getElementsByTagName('input')[0].value;
    var item = fs.getElementsByTagName('input')[1].value;
    var color = fs.getElementsByTagName('select')[0].value;
    var size = fs.getElementsByTagName('select')[1].value;
    var price = fs.getElementsByTagName('input')[2].value;
    var quantity = fs.getElementsByTagName('select')[2].value;
    var val = [[quantity],[price]];
    var multiply = 0;
    multiply+= (val[0]*val[1]);
    var sTotal='';

    All this information should be calculated elsewhere in another function from addtocart and passed to insertItemRow as a parameter.

  • 7. insertItemRow shouldn't contain:
    <i>
    </i>clientmessage.innerHTML='Thank You Joe for Shopping Mexicali Rose';
    var x,y;
    if (self.innerHeight) // all except Explorer
    {
    x = self.innerWidth;
    y = self.innerHeight;
    }
    else if (document.documentElement &amp;&amp; document.documentElement.clientHeight)
    {
    x = document.documentElement.clientWidth;
    y = document.documentElement.clientHeight;
    }
    else if (document.body) // other Explorers
    {
    x = document.body.clientWidth;
    y = document.body.clientHeight;
    }
    window.scrollBy(0,y);
    }

    else {
    alert('Please enter a Quantity for this item');
    button.parentNode.parentNode.getElementsByTagName('select')[2].focus();
    }

    that should go into another function...





    can you attach a zip so I can make all the changes I have in mind?
    • Copy linkTweet thisAlerts:
    @THEFOOLauthorDec 28.2009 — [B][U][COLOR="Red"]Ultimater[/COLOR][/U][/B]

    Thanks for the suggestions. Had a winrar zip archiver but it's expired. I do have fileZilla though. Don't know if that works for you exchaning upload files etc. Winrar just tried to charge me $325.0 for zip compressor:mad: Other than that I'm attaching a screen shot of the site I'm working on in MyDOCS.

    I can upload everything as text files????????? no picks though.

    [upl-file uuid=186d1b9b-e0df-4c1e-a0ee-68eba9d1b15f size=65kB]screenshot.JPG[/upl-file]
    Copy linkTweet thisAlerts:
    @UltimaterDec 28.2009 — Try filezilla then :p

    If you can at least make Rar or Tar files, rename their extension to ".zip" then try attaching them.

    Or find a site to upload to then post a link.

    You could also create a testing folder for the site then drop a link.

    The message forums support multiple attachments, you could attach the HTML, CSS, and JS files as ".txt"

    If you must resort to it, you can email at [i]ultimater at gmail dot com[/i] with the files.
    Copy linkTweet thisAlerts:
    @THEFOOLauthorDec 28.2009 — [B][U][COLOR="Red"]Ultimater[/COLOR][/U][/B]

    For the time bein I'll Just attach all the files as text. You'll have to put them in a folder called 'Mexicali' with these folders inside
    [LIST=1]
  • images/contains article images. I'll email seperatly.

    sounds/contains sounds to be played. I'll email seperatly.

    sources/containes website back grounds etc. I'll email seperatly.

    scripts/contains js.files

    styles/containes css.files

    zanfeld/contains jewelry pics. I'll email seperatly.

    • [/LIST]
    The Html are in the Mexicali folder

    No where neer ready to upload to site.

    Each product page is loaded to display by clicking on links on left.

    Each product page should have it's on pic folder like 'zanfeld' which may contain three product categorie pictures for 3 different product pages, Like
    [LIST=1]
  • Silver Jewelry

    Silver & Gold

    Silver & Stones

    • [/LIST]
    [B][U][COLOR="Red"]COUPLE MORE TO COME[/COLOR][/U][/B]

    [upl-file uuid=f09562d4-2d02-4c60-a24e-879135194326 size=345B]checkoutjs.txt[/upl-file]

    [upl-file uuid=16991ac7-fdb5-480e-9a54-462178ede623 size=29kB]indexjs.txt[/upl-file]

    [upl-file uuid=e93c4981-e637-4826-9fb3-4c59353d87a2 size=6kB]silverjewelryjs.txt[/upl-file]

    [upl-file uuid=91498b43-18f8-4eca-bde5-db13f83651f5 size=15kB]artical.txt[/upl-file]

    [upl-file uuid=22f323cc-0e4b-461f-81dc-3ff6741df544 size=23kB]checkout.txt[/upl-file]
    Copy linkTweet thisAlerts:
    @THEFOOLauthorDec 28.2009 — [B][U][COLOR="Red"]Ultimator[/COLOR][/U][/B]

    Only five files per message?

    [upl-file uuid=4ed6c90b-e50b-4547-aa15-0be16277464f size=3kB]contactus.txt[/upl-file]

    [upl-file uuid=e2f0e3ca-0c04-47b3-a75f-08fbec749087 size=3kB]faq.txt[/upl-file]

    [upl-file uuid=1b255ac5-7cf6-4d0d-bf4f-ce02969d3068 size=3kB]index.txt[/upl-file]

    [upl-file uuid=6ae97541-aa30-4e80-93eb-09c6a002dd27 size=32kB]silverjewelry.txt[/upl-file]
    Copy linkTweet thisAlerts:
    @UltimaterDec 28.2009 — Looking good, I'll set them up shortly - finishing up some flex for work.
    Copy linkTweet thisAlerts:
    @THEFOOLauthorDec 28.2009 — [B][U][COLOR="Red"]Ultimator[/COLOR][/U][/B]

    Gave you only the relevant stuff.

    Welcome to the madness:eek:

    Oh yeh check your gmail for the pics, remember to load them into their own folders named with lower case.

    [COLOR="Red"][B][U]DIDN'T UPLOAD CSS!!!!!!!![/U][/B][/COLOR]

    [upl-file uuid=90f10a25-ea7d-4d74-87d9-b85e6b7529eb size=9kB]checkoutcss.txt[/upl-file]

    [upl-file uuid=cc6691df-d2f8-4d08-b7f8-0bb9476b9397 size=5kB]indexcss.txt[/upl-file]

    [upl-file uuid=9597997e-35cb-441c-a7c7-069e6f29496f size=3kB]silverjewelrycss.txt[/upl-file]
    Copy linkTweet thisAlerts:
    @UltimaterDec 30.2009 — I setup your files on my computer today. (I never managed it last night)

    So many files all over the place...
    Welcome to the madness:eek:[/quote]
    Geez you weren't kidding...

    I'll get back to you tomorrow.
    ×

    Success!

    Help @THEFOOL 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.17,
    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,
    )...