Question

Hi I am newbie in programming and I am trying to learn and make it work with each(). Bear with me. I try my best to learn from here and you.

1. I am trying to go through the item per product in a catalog for the specific prices: either original and sale from the page.
2. then calculate the % for discount
3. print discount %
4. check to compare the percent to color the background: brown, yellow and red.

Now, I test each line to see if it works or not.
salecost = $(this).find('#sale').html(); returns a few nulls before displays amount with dollar signs. Weird couldn’t figure that one out. Replace() isn’t working right – couldn’t get it working. It is supposed to remove dollar sign.

Also, I am not sure how it goes with compare — do i write statement correctly?

Thank you in advance for the help

var salecost;
var originalcost;
var percentDiscount;
var percent; 

function calculate(sale, original)
 {
  percentDiscount = eval((sale/original)*100);
        document.getElementById("percentoff").innerHTML=parseInt(percentDiscount) + '%';       
 }

$(document).ready(function(index){

           $('.item').each(function(){     
            salecost = $(this).find('#sale').html();
            salecost = salecost.replace(/[^\d\.]/g,"");
            alert (salecost);
             originalcost = $('#sale').html();
             originalcost = originalcost.replace(/[^\d\.]/g,"");
             alert (originalcost);
             percent = calculate(salecost,originalcost);
             alert(percent);

               if(percent<30)
               {
                       $("div#percentoff").css({"background-color":"brown", "padding":"5px 0"});
               }

               if(percent<50){
                       $("div#percentoff").css({"background-color":"yellow", "padding":"5px 0"});
               }

               if(percent<70){
                       $("div#percentoff").css({"background-color":"red", "padding":"5px 0"});
               }
       });
});

Answer 1

1. You should move your var statements to within the each function so they’re not global.
2. You don’t need to you the eval, (sale/original)*100 will work by it self.

3. It’s better to use consistent style, your calculate function could be written using jquery.

   $(“#percentoff”).html(percentDiscount) + ‘%’);

4. casting is unnecessary for most cases in javascript, concatenating a number with a string will produce a string.

5. your calculate function should return percentDiscount;
6. Instead of using .css() it would be better to use .addClass that way it’s easy to undo with .removeClass, the style is all the the style sheet and you can use jquery to select the elements with the class.