how to change variable values using if statement in jQuery/jS

Question

Hello I am having some trouble with my program. I've set some variables in the beginning of my program but Id like to change them with an if statement. Right now the first if statement gives me the results i want, but the second else if statement isnt working and the variables take the default values of '0'

here is the start of my jQuery code:

    jQuery(".repair-grid-item1").click(function(){
         jQuery(".repair-grid-item1 i").toggle();
         jQuery(".repair-grid-item1").toggleClass("grid-active");
         jQuery('.repair-grid-item1').gg();
    });

   (function( $ ){
   $.fn.gg = function() {
      var price = 0;

      var one = 0;
      var two = 0;
      var three = 0;
      var four = 0;
      var five = 0;
      var six = 0;

      // *** this code block is working, returning correct values ***
      if (jQuery(".repair-grid-item").hasClass("iPhone5")) {
        var one = 85;
        var two = 70;
        var three = 75;
        var four = 65;
        var five = 75;
        var six = 80;
      }


      // *** this code block isnt working, returning default values of 0 ***
      else if (jQuery(".repair-grid-item").hasClass("iPhone5c")) {
        var one = 85;
        var two = 70;
        var three = 75;
        var four = 65;
        var five = 75;
        var six = 80;
      }

      //one only
      if (jQuery(".repair-grid-item1").hasClass("grid-active") &&
          !jQuery(".repair-grid-item2").hasClass("grid-active") &&
          !jQuery(".repair-grid-item3").hasClass("grid-active") &&
          !jQuery(".repair-grid-item4").hasClass("grid-active") &&
          !jQuery(".repair-grid-item5").hasClass("grid-active") &&
          !jQuery(".repair-grid-item6").hasClass("grid-active"))
      {
          price = one;
          document.getElementById("total-price").innerHTML = price;
          localStorage.setItem("sum", price);
      }
   };
})( jQuery );

here is a small snippet of my html code (this is the iPhone5 page)

          <div class="repair-grid-item repair-grid-item1 iphone5">
            <h3>Screen Repair</h3>
            <i class="fa fa-check-circle-o fa-2x" aria-hidden="true"></i>
          </div>

iphone5c page:

          <div class="repair-grid-item repair-grid-item1 iphone5c">
            <h3>Screen Repair</h3>
            <i class="fa fa-check-circle-o fa-2x" aria-hidden="true"></i>
          </div>

thanks!

This might help "Javascript variable scope" http://stackoverflow.com/a/500459/2008111 See Example 1 - 3 — caramba, Jul 05 '16 at 06:09
Perhaps you need to [match the case](http://stackoverflow.com/a/2580031/615754) of your selector with the class in the html? Is there more to your code than what is shown? You don't ever use the values of any of those variables except for `one`. — nnnnnn, Jul 05 '16 at 06:14

rkrishnan · Answer 1 · 2016-07-05T06:22:05.897

1

Variables in Javascript are function scoped. You don't have to declare them again using var inside your if, else-if blocks.

Edit: As others have pointed out, the problem is with the case of the css class iphone5c. You are checking for iPhone5c.

edited Jul 05 '16 at 06:22

answered Jul 05 '16 at 06:10

rkrishnan

776
1
9
21

Yes, but that doesn't explain the behaviour the OP is asking about. Redeclaring them doesn't reset them. – nnnnnn Jul 05 '16 at 06:12
Yes, that's right. The problem is with case of the class as others pointed out. Editing my answer now. Thanks! – rkrishnan Jul 05 '16 at 06:19

score 0 · Accepted Answer · answered Jul 05 '16 at 06:18

The problem is that you are checking for the class iPhone5c instead of the class iphone5c, note the capital P. JQuery is case sensitive, so you should writte them in with the same caps.

So your your code is storing 0 on the variables because it doesn't pass the if else condition.

Furthermore, as other answers say, due to the scope, variables don't need to be redeclared using var inside the if. You should remove that.

score 0 · Answer 3 · answered Jul 05 '16 at 06:20

I'm sorry guys i made a silly error, @nnnnnn pointed me in the right direction. i was not consistent in my cases, 'iPhone5c' uppercase P was in my jQuery code while 'iphone5c' lowercase p was in my html. I corrected the cases and it works fine now. Also you guys were also correct, I didnt need to have 'var' infront of each veriable in the if and else if cases. Thanks for helping! and thanks @nnnnnn for finding the solution :)

how to change variable values using if statement in jQuery/jS

3 Answers3