Question

It might be that I’ve been staring at this for too long, and the function I’ve written isn’t really that complicated, but for whatever reason, I cannot get this to function properly. The h1 tag changes as it should, but my if-else doesn’t seem to be functioning based on the “page_layout” variable. My code is below… any ideas?

<script>
    $(document).ready(
     function() {
         //Set text for H1 tags here
         var title = "Test title";

         //Set main-image layout here (1,2,3,4)
         var page_layout = "1";

         //If page_layout = 4, then set connected-image for top
         var connected_image = "images/connected-image.jpg";

         //Image for main-image area
         var main_image = "images/main-image.jpg";

         //Set main-image text here
         var main_image_text = "See how this works.";

         //Set main-image-text-url location
         var main_image_text_url = "http://www.example.com";

         //Do not touch this code
        $('h1').html(title);

        if (page_layout == "1"){
            $.('#main-image').css('background-image', main_image);
            $.('#main-image').css('background-position', 'top right');
            $.('#main-image').css('background-repeat','no-repeat');
            $.('#main-image').addClass('padding-21');
            $.('#main-image').html(main_image_text);
            $.('#main-image').append('<br><a href="' + main_image_text_url + '">tell me more</a>');
        }else if (page_layout == "2"){
            $.('#middle').css('font-size','15px');
            $.('#main-image').addClass('padding-21');
            $.('#main-image').html(main_image_text);
            $.('#main-image').append('<br><a href="' + main_image_text_url + '">tell me more</a>');
        }else if (page_layout == "3"){
            $.('#main-image').css('background-image', main_image);
            $.('#main-image').css('background-position', 'top left');
            $.('#main-image').css('background-repeat','no-repeat');
            $.('#main-image').addClass('padding-491');
            $.('#main-image').html(main_image_text);
            $.('#main-image').append('<br><a href="' + main_image_text_url + '">tell me more</a>');
        }else if (page_layout == "4"){
            $.('connected-image').css('background-image', connected_image );
            $.('connected-image').css('background-position', 'top right');
            $.('connected-image').css('background-repeat','no-repeat');
        }else{
            //Nothing
        }
     }
    )
</script>

Answer 1

For starters, you should be seeing some syntax errors in the javascript console. You need to change your selectors from $.('selector') to $('selector') (remove the . after $).

Also, $('connected-image') should probably be using a class selector $('.connected-image').