Simple calculation from div contents

thredder · 12-12-2012, 02:07 PM

Hello,

Could someone help me with displaying a simple calculation from a div containing a price? It's to display reward points for each product in a shop.

Example:

A div with a class name of 'price' holds the price of the item. A div next to it with a class name of 'points' would display the reward points calculation. So, if an item is £20, and you get 1 point per pound spent, you would get 20 points and this would be the number shown in the 'points' div. It has to be rounded DOWN, so if the item is £19.99 they would get 19 points, not 20.

Does that make sense?

Even better would be if someone could also show me how to calculate how much those points are worth, which is 5p per point, so in this case it would be £1.00.

Thanks in advance!

sunfighter · 12-12-2012, 02:37 PM

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;
}
</style>
</head>

<body>
<div class="bare">price</div><div id="price">45.87</div>
<div id="points"></div><div class="bare">points</div>

<script type="text/javascript">
var price = document.getElementById("price").innerHTML;
var points = Math.floor(price);
document.getElementById("points").innerHTML = points;
</script>
</body>
</html>

Please mark your posts as solved. In the message editor next to the title is a dropdown to do this. Thank You.

thredder · 12-12-2012, 03:39 PM

That is excellent, thanks!

Could you explain how it works?

Also, is there a way to do the converting in to how much they're worth?

thredder · 12-12-2012, 03:43 PM

Sorry, just noticed that you've used id's for the divs. As there will be more than one on the page it would need to be a class rather than an id.

sunfighter · 12-12-2012, 11:30 PM

Good luck with that. How many on the page? Are you talking many div prices but one points div? Need all the information. How are you planning on adding the prices? I really think you need to use id's.

thredder · 12-12-2012, 11:40 PM

If it can't be done then it can't be done, but it would be a nice touch so just thought I'd ask.

Basically it's an online shop, so there will be many items on each page. The code for the product output only needs to be put in once and then it'll replicate for each product in a category. I had a feeling that it wouldn't be possible for more than one box/div.

I can't give a separate id or class to each area underneath the product, it has to be just one, all the same. The prices will be added automatically from the CMS.

thredder · 12-13-2012, 09:54 AM

Anyone?

xelawho · 12-13-2012, 02:01 PM

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;
}
</style>
</head>

<body>
<div class="bare">price</div><div class="price">45.87</div>
<div class="points"></div><div class="bare">points</div>
<div class="bare">price</div><div class="price">93.28</div>
<div class="points"></div><div class="bare">points</div>

<script type="text/javascript">
var divs=document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
if(divs[i].className=="price"){
divs[i+1].innerHTML=Math.floor(divs[i].innerHTML);
	}
}
</script>
</body>
</html>

I don't really get the bit about the points being worth 5p - if that's the case why do you get 19 if you are spending £19.99?

sunfighter · 12-13-2012, 02:27 PM

Quote:

I can't give a separate id or class to each area underneath the product

You have to have a product id to find your inventory in a database. Use that number for the id or, if you are going to use it elsewhere as an id, it is very easy to make sub id's by adding to the main id. LIKE: product id is 123456789123 and the id of the price div 123456789123a3 All price div id end in a3. Understand?

thredder · 12-16-2012, 09:47 AM

Thanks xelawho for the updated script using classes, that should work fine now.

Your question about the points being worth 5p - that's 5p each for when they're spending their accumulated points, so they get a point for each £1 they spend (ie. 20 points for £20 spend) and that works out as £1 (20 points x 5p each) that they can then save on a future purchase. That's basically how reward/loyalty points work.

If there was a way to show that as well then it would be perfect.

Sunfighter, I can't do it that way as I'm not building the shop from scratch, it's on an ecommerce platform and I don't have full control over things like that. But I appreciate your help.

xelawho · 12-16-2012, 03:05 PM

I think I might be getting it...

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;
}
</style>
</head>

<body>
<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>
<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>

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

thredder · 02-01-2013, 02:28 PM

Hi again,

Just bumping this as, although it was 'solved', I need a variation of the code.

Basically, xelawho's code above works fine if there are no other empty divs on the page, but when there are it's placing the points total in them. So what I need is for the script to ONLY put the calculated points total in to the div with the class "points".

Does that make sense?

If you think of a row of products, and underneath each product image there are two boxes. One box has the price in it and has a class "price", the other box is where the worked out loyalty points go and has a class of "points". I need it to calculate the points total from the price box and display the points in the points box.

Thanks in advance for all your help. It's almost there!

thredder · 02-06-2013, 03:13 PM

Can anyone help with this? Perhaps someone who has already answered?

thredder · 02-13-2013, 10:17 AM

Third bump.

Is there ANYONE who can help with this, PLEEEEASE?

The script's already there, up above. I just need someone to help with getting the points value to appear in a div with a class of 'points'.

Please help, it's really important to me.

jmrker · 02-13-2013, 08:50 PM

Quote:

Originally Posted by thredder

Third bump.

Is there ANYONE who can help with this, PLEEEEASE?

The script's already there, up above. I just need someone to help with getting the points value to appear in a div with a class of 'points'.

Please help, it's really important to me.

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?