How can I have a function method in an if condition with JavaScript code?

Question

I want to give condition method in my JavaScript code. This code does not work in Internet Explorer 10 version. When I paste this code in JavaScript validator, this message is shown:

Function declarations should not be placed in blocks. Use a function expression or move the statement to the top of the outer function.

How can I have a function here?

            if(jQuery("header").attr("id") == "header-style-two")
        {
                    function sticky_relocate() {
                        var window_top = jQuery(window).scrollTop();
                        var div_top = jQuery('#sticky-anchor').offset().top;
                        if (window_top > div_top) {
                            jQuery('.mainmenu-area').removeClass('light-menu');
                            //This is for when div in top         
                        } else {
                            jQuery('.mainmenu-area').addClass('light-menu');
                            //This is for when div in not top
                        }
                    }

                    jQuery(function () {
                        jQuery(window).scroll(sticky_relocate);
                        sticky_relocate();
                    }); 
        }

Thanks @Mahi . This is very helpful for me . Thanks a lot :) — Mahmudul Hasan Sohag
– Mahmudul Hasan Sohag, Commented Dec 19, 2016 at 7:27

Alexander O'Mara · Accepted Answer · 2016-12-19 15:46:43Z

6

You can't have named function in an if block (it is not valid by the spec and hoisting would make it rather confusing anyway, but some JavaScript engines may try to compensate for bad code, which is why it may work in some browsers), but you can assign functions to variables in an if block.

Rather than:

function sticky_relocate() {

You can do this:

var sticky_relocate = function() {

So something like this will do the trick:

if(jQuery("header").attr("id") == "header-style-two")
{
    var sticky_relocate = function() {
        var window_top = jQuery(window).scrollTop();
        var div_top = jQuery('#sticky-anchor').offset().top;
        if (window_top > div_top) {
            jQuery('.mainmenu-area').removeClass('light-menu');
            //This is for when div in top         
        } else {
            jQuery('.mainmenu-area').addClass('light-menu');
            //This is for when div in not top
        }
    }

    jQuery(function () {
        jQuery(window).scroll(sticky_relocate);
        sticky_relocate();
    }); 
}

edited Dec 19, 2016 at 15:46

answered Dec 19, 2016 at 7:06

Alexander O'Mara

60.9k19 gold badges175 silver badges183 bronze badges

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

5 Comments

A.T. Over a year ago

at first place, why someone need to put function in if block ?

Mahi Over a year ago

why we can't put named function

Alexander O'Mara Over a year ago

@A.T. You might want to conditionally set a function to a variable, or avoid creating functions you never want to use.

Mahmudul Hasan Sohag Over a year ago

Thanks a lot #Alexander . This code work and my problem was solved :)

Mahi Over a year ago

its worth mention in your answer that why we can't we have named function in an if block

therobinkim · Accepted Answer · 2016-12-19 07:10:05Z

JSHint is giving you a warning, which means, "we think this is not the best idea, but we'll allow you to do it."

You can change your code in a couple of ways.

Change the function declaration to a function expression:

if(jQuery("header").attr("id") == "header-style-two") {
  var sticky_relocate = function() {
    var window_top = jQuery(window).scrollTop();
    var div_top = jQuery('#sticky-anchor').offset().top;
    if (window_top > div_top) {
      jQuery('.mainmenu-area').removeClass('light-menu');
      //This is for when div in top         
    } else {
      jQuery('.mainmenu-area').addClass('light-menu');
      //This is for when div in not top
    }
  }
  jQuery(function () {
    jQuery(window).scroll(sticky_relocate);
    sticky_relocate();
  }); 
}

OR move the function definition out of the if block.

if(jQuery("header").attr("id") == "header-style-two") {
  jQuery(function () {
    jQuery(window).scroll(sticky_relocate);
    sticky_relocate();
  }); 
}

function sticky_relocate() {
  var window_top = jQuery(window).scrollTop();
  var div_top = jQuery('#sticky-anchor').offset().top;
  if (window_top > div_top) {
    jQuery('.mainmenu-area').removeClass('light-menu');
    //This is for when div in top         
  } else {
    jQuery('.mainmenu-area').addClass('light-menu');
    //This is for when div in not top
  }
}

Mouli S · Accepted Answer · 2016-12-19 07:12:08Z

0

You can't have function declaration under if condition. You can put it outside and call it based on the condition.

var isHeaderStyleTwo = (jQuery("header").attr("id") == "header-style-two");
function sticky_relocate() {
  var window_top = jQuery(window).scrollTop();
  var div_top = jQuery('#sticky-anchor').offset().top;
  if (window_top > div_top) {
    jQuery('.mainmenu-area').removeClass('light-menu');
    //This is for when div in top         
  } else {
    jQuery('.mainmenu-area').addClass('light-menu');
    //This is for when div in not top
  }
}

jQuery(function () {
  if (isHeaderStyleTwo) {
      jQuery(window).scroll(sticky_relocate);
        sticky_relocate();
  }

answered Dec 19, 2016 at 7:12

Mouli S

11 bronze badge

Collectives™ on Stack Overflow

How can I have a function method in an if condition with JavaScript code?

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related