Javascript: Code doesn't get executed when put into function

Question

I have this working Javascript code which does some resizing on init and resize:

(function (w) {

  w.init = function () {

    var w = window.innerWidth;
    var h = window.innerHeight; 

    //resize_font;
    var fs = parseInt(w / 26);   
    document.body.style.fontSize = fs + "px";

    //resize_cover;
    var logo = get_by_id("logo");
    var logo_height = logo.clientHeight;  
    var menu = get_by_id("menu");
    var menu_height = menu.clientHeight; 
    var cover_height = logo_height + menu_height;
    var distance_top = (h - cover_height) / 2.5;

    var container = get_by_id("container");
    container.style.paddingTop = distance_top + "px"; 
  }

  w.resize = function () {

    var w = window.innerWidth;
    var h = window.innerHeight; 

    //resize_font;
    var fs = parseInt(w / 26);   
    document.body.style.fontSize = fs + "px";

    //resize_cover;
    var logo = get_by_id("logo");
    var logo_height = logo.clientHeight;  
    var menu = get_by_id("menu");
    var menu_height = menu.clientHeight; 
    var cover_height = logo_height + menu_height;
    var distance_top = (h - cover_height) / 2.5;

    var container = get_by_id("container");
    container.style.paddingTop = distance_top + "px"; 
  }
}

Now I want to refactor the code for resizing font and cover into a function, but I can't get it working. I tried this:

(function (w) {

  w.init = function () {
    var w = window.innerWidth;
    var h = window.innerHeight; 

    resize_font;
    resize_cover;
  }

  w.resize = function () {
    var w = window.innerWidth;
    var h = window.innerHeight; 

    resize_font;
    resize_cover;
  }

  function resize_cover() {
    var logo = get_by_id("logo");
    var logo_height = logo.clientHeight;  
    var menu = get_by_id("menu");
    var menu_height = menu.clientHeight; 
    var cover_height = logo_height + menu_height;
    var distance_top = (h - cover_height) / 2.5;

    var container = get_by_id("container");
    container.style.paddingTop = distance_top + "px";        
  }

  function resize_font() {
    var fs = parseInt(w / 26);   
    document.body.style.fontSize = fs + "px";        
  }
}

The console doesn'T show any errors, but resizing isn't happening. What am I doing wrong?

Ehhh, what exactly do you think that resize_font; does?

Amit
– Amit

2016-03-01 22:35:25 +00:00
Commented Mar 1, 2016 at 22:35 — Amit
– Amit, Commented Mar 1, 2016 at 22:35
Uhhh, resizing font_size.

Flip
– Flip

2016-03-01 22:38:26 +00:00
Commented Mar 1, 2016 at 22:38 — Flip
– Flip, Commented Mar 1, 2016 at 22:38

SethWhite · Accepted Answer · 2016-03-01 22:35:54Z

3

You need to invoke your functions in your init and resize event functions. You have:

resize_font;
resize_cover;

You need:

resize_font();
resize_cover();

The name of a function is just a reference to it, which is why you don't see any errors. What you currently have is similar to saying:

var x = 1;
x;

answered Mar 1, 2016 at 22:35

SethWhite

1,96718 silver badges24 bronze badges

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

Comments

TobotRobot · Accepted Answer · 2016-03-01 22:36:41Z

2

Looks like your problem is this:

resize_font;
resize_cover;

I think you mean

resize_font();
resize_cover();

answered Mar 1, 2016 at 22:36

TobotRobot

544 bronze badges

Comments

kutomer · Accepted Answer · 2016-03-01 22:37:43Z

1

It's seems like you forgot to execute the functions, just mentioned the pointer.

please try to change:

resize_font;
resize_cover;

to

resize_font();
resize_cover();

answered Mar 1, 2016 at 22:37

kutomer

7348 silver badges18 bronze badges

Collectives™ on Stack Overflow

Javascript: Code doesn't get executed when put into function

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related