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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 21
  1. #1
    New Coder
    Join Date
    Mar 2011
    Posts
    24
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Question Simple calculation from div contents

    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!

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,348
    Thanks
    23
    Thanked 618 Times in 617 Posts
    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.
    Last edited by sunfighter; 12-12-2012 at 02:40 PM.

  • Users who have thanked sunfighter for this post:

    thredder (12-12-2012)

  • #3
    New Coder
    Join Date
    Mar 2011
    Posts
    24
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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?

  • #4
    New Coder
    Join Date
    Mar 2011
    Posts
    24
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,348
    Thanks
    23
    Thanked 618 Times in 617 Posts
    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.

  • #6
    New Coder
    Join Date
    Mar 2011
    Posts
    24
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.

  • #7
    New Coder
    Join Date
    Mar 2011
    Posts
    24
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Anyone?

  • #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    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?

  • Users who have thanked xelawho for this post:

    thredder (12-16-2012)

  • #9
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,348
    Thanks
    23
    Thanked 618 Times in 617 Posts
    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?

  • #10
    New Coder
    Join Date
    Mar 2011
    Posts
    24
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.

  • #11
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    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>

  • #12
    New Coder
    Join Date
    Mar 2011
    Posts
    24
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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!

  • #13
    New Coder
    Join Date
    Mar 2011
    Posts
    24
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Can anyone help with this? Perhaps someone who has already answered?

  • #14
    New Coder
    Join Date
    Mar 2011
    Posts
    24
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.

  • #15
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Exclamation

    Quote Originally Posted by thredder View Post
    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?
    Last edited by jmrker; 02-13-2013 at 09:00 PM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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