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" stackoverflow.com/a/500459/2008111 See Example 1 - 3 — caramba
– caramba, Commented Jul 5, 2016 at 6:09
Perhaps you need to match the case 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
– nnnnnn, Commented Jul 5, 2016 at 6:14

rkrishnan · Accepted Answer · 2016-07-05 06:22:05Z

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 5, 2016 at 6:22

answered Jul 5, 2016 at 6:10

rkrishnan

8061 gold badge10 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

nnnnnn Over a year ago

Yes, but that doesn't explain the behaviour the OP is asking about. Redeclaring them doesn't reset them.

rkrishnan Over a year ago

Yes, that's right. The problem is with case of the class as others pointed out. Editing my answer now. Thanks!

Iván Rodríguez Torres · Accepted Answer · 2016-07-05 06:18:05Z

0

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.

answered Jul 5, 2016 at 6:18

Iván Rodríguez Torres

4,4493 gold badges33 silver badges49 bronze badges

Comments

cup_of · Accepted Answer · 2016-07-05 06:20:44Z

0

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 :)

answered Jul 5, 2016 at 6:20

cup_of

6,75510 gold badges52 silver badges106 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related