In Javascript how can I make a second if statement run within another if statement?

Question

I've set up some JS (using jQerry library), and it's not working as I'd expected it to. I am fairly new to Javascript, so I did a lot of looking around online to find out if running an If within an If was possible, and came to the conclusion it is.

It should be self-explanatory what the code is doing. In a nut shell ... it's testing for a boolean in a custom attribute on the drop-down selector (the "primary if statement"); AND, within those two primary results (true, or false), it's testing for three different screen widths (the "secondary if statement").

It validates, with no errors, on https://beautifytools.com/ . So syntax doesn't appear to be the issue.

My JS:

 var widthMobile;
 var widthTablet;
 var widthDesktop;
    $(window).resize(function(){
            if (($(window).width()<651) && ($(window).width()<981)) // mobile
            {
                widthMobile = true;
                widthDesktop = false;
                widthTablet = false;
                console.log('Mobile:'+widthMobile);

            } else if (($(window).width()>=981)) // Desktop
            {
                widthTablet = false;
                widthMobile = false;
                widthDesktop = true;
                console.log('Desktop:'+widthDesktop);

            } else if (($(window).width()>=651) && ($(window).width()<981)) // Tablet
            {
                widthTablet = true;
                widthMobile = false;
                widthDesktop = false;
                console.log('Tablet:'+widthTablet);
            }
    });
    
$(document).ready(function() {
    $('#pa_size').change(function() {
    console.log('selector changed');    
        if ($("#pa_size").find("option:selected").attr('stock-status') == "false") { //out of stock
        
            $("#sticky-atc-bar .single_add_to_cart_button").hide();
            console.log('button hidden');
            if (widthDesktop) { // Desktop
                $("#sticky-atc-bar").css({"height": "120px"});
                $("#sticky-atc-bar .et_pb_module.et_pb_wc_add_to_cart").css({"margin-top": "-27px"});
                console.log('Desktop and in stock');
            } else if (widthTablet) {
                $("#sticky-atc-bar").css({"height": "115px"}); // Tablet
                $("#sticky-atc-bar .et_pb_module.et_pb_wc_add_to_cart").css({"margin-top": "10px"});
                console.log('Tablet and in stock');
            } else if (widthMobile) {
                $("#sticky-atc-bar").css({"height": "190px"}); // Mobile
                $("#sticky-atc-bar .et_pb_module.et_pb_wc_add_to_cart").css({"margin-top": "12px"});                
                console.log('Mobile and in stock');

            }
            
        } else { // In stock
        
//          $("#sticky-atc-bar .woocommerce-variation-availability").hide();
            $("#sticky-atc-bar .single_add_to_cart_button").show();
            
      console.log('button shown');
      
            if (widthDesktop) { // Desktop
                $("#sticky-atc-bar").css({"height": "100px"});
                $("#sticky-atc-bar .et_pb_module.et_pb_wc_add_to_cart").css({"margin-top": "-17px"});
                console.log('Desktop and NOT in stock');
                
            } else if (widthTablet) {
                $("#sticky-atc-bar").css({"height": "115px"}); // Tablet
                $("#sticky-atc-bar .et_pb_module.et_pb_wc_add_to_cart").css({"margin-top": "10px"});
                console.log('Tablet and NOT in stock');

            } else if (widthMobile) {
                $("#sticky-atc-bar").css({"height": "150px"}); // Mobile
                $("#sticky-atc-bar .et_pb_module.et_pb_wc_add_to_cart").css({"margin-top": "10px"});                
                console.log('Mobile and NOT in stock');

            }
        }
    }).trigger("change");
});

The HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sticky-atc-bar">
  <div id="inside-container">
    <select id="pa_size" class="" name="attribute_pa_size" data-attribute_name="attribute_pa_size" data-show_option_none="yes">
      <option value="1kg" stock-status="true" class="attached enabled">1kg - $75.90 &nbsp;- (In Stock)</option>
      <option value="2kg" stock-status="false" class="attached enabled">2kg - $119.90 &nbsp;- (No Stock)</option>
      <option value="3kg" selected="selected" stock-status="false" class="attached enabled">3kg - $174.90 &nbsp;- (No Stock)</option>
      <option value="5kg" stock-status="false" class="attached enabled">5kg - $262.90 &nbsp;- (No Stock)</option>
      <option value="10kg" stock-status="false" class="attached enabled">10kg - $482.90 &nbsp;- (No Stock)</option>
      <option value="20kg" stock-status="false" class="attached enabled">20kg - $823.90 &nbsp;- (No Stock)</option>
    </select>
    <button type="submit" class="single_add_to_cart_button button alt disabled wc-variation-is-unavailable">Add to cart</button>
  </div>

<div class="test">
TEST
</div>
  <div class="et_pb_module et_pb_wc_add_to_cart">
    <p>
      some content
    </p>
  </div>
</div>

As you will see, it is running the primary if statement fine, but not the secondary if statements within primary one.

I've set up a jFiddle for it here .

Two questions:

1. What's causing my code not to work?
2. Even if we correct my code, is there a different and better way to go about getting the outcome I want?

Answer 1

Here is a modified JS fiddle. Its better to use Media Queries, you can do plenty with that. Only use JS if css has been explored to its limits.

But that said, you mentioned you want to change classes dynamically, so I set this up for you to see how you could do that https://jsfiddle.net/7u1gcmL5/8/

Also just to help you get familiar with JQuery, show you how to simplify some of your code. I didnt not want to do it all but at least show you a direction you can go.

PS you have to paste code to link to jsfiddle but this shows how you can reduce code

function checkWindowSize(){
    let windowWidth = $(window).width(); // keep it short
    if(windowWidth>=981){
       return 'widthDesktop';
    } else if((windowWidth>=651) && (windowWidth<981)){
      return 'widthTablet';
    }
    return 'widthMobile'; //reduce your ifs and else as much as you can
 }

As mentioned by Trincot, you dont need to add && (windowWidth<981) in the statement as its always true.