Simple calculation from div contents - Page 2

thredder · 02-13-2013, 10:32 PM

Quote:

Originally Posted by jmrker

There are at least 3 script postings.

Which one are you currently using?

Also, where are the blank (non-point) <div>s supposed to appear?

Using the last one on the page. It works fine, but like I said - there is no class name on the div the points total is supposed to go inside, and there needs to be to make sure it only goes in that div and not anywhere else.

jmrker · 02-14-2013, 02:30 AM

How would this work for you?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>New document</title>
<style type="text/css">
div{
	width: 55px;
	height: 25px;
	border: 1px black solid;
	text-align:center;
	float:left;
}
.bare{	border: 0px white; }
br { clear:both; }

</style>
</head>

<body>
<div id="calcs" style="width:25%; border:0px; ">
 <div class="bare">price</div> 
 <div class="price">45.87</div>
 <div class="points"></div>
 <div class="bare">points</div>
 <div class="value"></div> 
 <div class="bare">value</div>
 <br>
 <div class="bare">price</div> 
 <div class="price">93.28</div>
 <div class="points"></div> 
 <div class="bare">points</div>
 <div class="value"></div> 
 <div class="bare">value</div>
 <br>
</div>
<br>&nbsp;<p>
<div id="calcsResults" style="width:25%; border:0px">
 <div class="bare">price</div> 
 <div class="price"></div>
 <div class="points"></div> 
 <div class="bare">points</div>
 <div class="value"></div> 
 <div class="bare">value</div>
<br>
</div>

<script type="text/javascript">
var str = '';  var num = 0;
var priceSum = 0;  var pointSum = 0;
var divs=document.getElementById('calcs').getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
  if(divs[i].className=="price") { str=Math.floor(divs[i].innerHTML);  priceSum += Number(str);  divs[i+1].innerHTML=str}
  if(divs[i].className=="points") {num=Number(divs[i].innerHTML);  pointSum += (num*.05);  divs[i+2].innerHTML="£"+(num*.05)+"p"}	
}
    divs=document.getElementById('calcsResults').getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
  if(divs[i].className=="price") { divs[i+1].innerHTML=priceSum}
  if(divs[i].className=="points") {  divs[i+2].innerHTML="£"+pointSum.toFixed(2)+"p"}	
}
</script>
</body>
</html>

thredder · 02-14-2013, 10:34 AM

Thanks for taking a look at it, I really appreciate your help.

That works ok if you're just outputting it once on the page. Any more than once and it doesn't work, and I need it to be under each product on the page, so up to 30 times.

If you imagine an online shop, and you're looking at a page of products, say 30 on one page, and each one has a price underneath it. I need the script to take the price of that product (from a div with a class of "price"), do the loyalty points calculation (one point per whole pound), and then put the points total in the div with a class of "points". I need that on each and every product. I don't really need the value part anymore, or for the points to be added to each other. Just the part I described.

So presumably the div with an id of "calcs" is causing a problem, as it would be reproduced about 30 times on the page and therefore creates a clash.

The funny thing is, I actually thought this would be such a simple script! Haha! But it's taking forever to work out. I appreciate the help. If you could try again I'd be grateful. Thanks.

thredder · 02-14-2013, 10:53 AM

Also, it could be that it just doesn't work because everything's inside another div.

For example:

<div class="holder">
<div class="price">£19.99</div>
<div class="points"></div>
</div>

This produces either a 'NaN' inside the "points" div, or nothing at all.

Old Pedant · 02-15-2013, 07:45 PM

That actually makes it easier.

Code:

var holders = document.getElementsByClassName("holder");
for ( var d = 0; d < divs.length; ++d )
{
    var hdiv = divs[d];
    var prdiv = hdiv.getElementsByClassName("price")[0];
    var ptdiv = hdiv.getElementsByClassName("points")[0];
    var price = Number( prdiv.innerHTMLreplace(/[^\d\.]/g,"") ); // remove currency, convert to number
    var points = Math.floor(price);
    ptdiv.innerHTML = points;
}

Only problem with this is that older versions of MSIE don't support getElementsByClassName.

Okay, so provide a substitute:

Code:

function elementsByClassName( name, container, elemType )
{
    if ( container == null ) { container = document; }
    if ( container.getElementsByClassName != null )
    {
        return container.getElementsByClassName( name );
    }
    if ( elemType == null ) { elemType = "*"; }
    var find = container.getElementsByTagName( elemType );
    var elems = [];
    for ( var e = 0; e < find.length; ++e )
    {
        if ( find[e].className == name ) { elems.push( find[e] ); }
    }
    return elems;
}

And then you can use that in the prior code, thus:

Code:

var holders = elementsByClassName(document,"holder","div");
for ( var d = 0; d < divs.length; ++d )
{
    var hdiv = divs[d];
    var prdiv = elementsByClassName(hdiv,"price","div")[0];
    var ptdiv = elementsByClassName(hdiv,"points","div")[0];
    var price = Number( prdiv.innerHTMLreplace(/[^\d\.]/g,"") ); // remove currency, convert to number
    var points = Math.floor(price);
    ptdiv.innerHTML = points;
}

jmrker · 02-15-2013, 09:16 PM

Is that supposed to be?:

Code:

    var price = Number( prdiv.innerHTML.replace(/[^\d\.]/g,"") ); // remove currency, convert to number

Also, is holder class defined as?

Code:

.holder { }