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 2 of 2 FirstFirst 12
Results 16 to 21 of 21
  1. #16
    New Coder
    Join Date
    Mar 2011
    Posts
    24
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jmrker View Post
    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.

  2. #17
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,075
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    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>

  3. Users who have thanked jmrker for this post:

    thredder (02-14-2013)

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

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

  6. #20
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    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;
    }
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  7. Users who have thanked Old Pedant for this post:

    thredder (02-18-2013)

  8. #21
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,075
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Question

    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 { }


 
Page 2 of 2 FirstFirst 12

Posting Permissions

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