How to get Javascript function to work in Rails app?

Question

I'm getting this error message:

Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

and this second line of code is being flagged

var nav                 = document.querySelector('.navv'),
nav_height          = getComputedStyle(nav).height.split('px')[0],

I'm in the middle of converting a static webpage into a Ruby on Rails app and this code works just fine on the original project, but I'm getting this error message on Rails. How do I get this code working again?

Here is the rest of the function for refrence:

var nav                 = document.querySelector('.navv'),
nav_height          = getComputedStyle(nav).height.split('px')[0],
nav_links           = document.querySelector('.nav-links'),
//nav_links_height    = getComputedStyle(nav_links).height.split('px')[0],
sticky_class        = 'is-fixed';
//unfixed             = 'unfixed'


function stickyScroll(e) {

if( window.pageYOffset > (nav_height) ) {
nav_links.classList.add(sticky_class);
}

if( window.pageYOffset < (nav_height) ) {
nav_links.classList.remove(sticky_class);

 }
}

This doesn't have anything to do with ruby on rails. You should remove the tag. — user1801879
– user1801879, Commented Dec 13, 2015 at 7:19

max · Accepted Answer · 2015-12-13 07:53:45Z

2

You are not actually checking if the element exists before calling window.getComputedStyle.

Document.querySelector()
Returns null if no matches are found; otherwise, it returns the first matching element.
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

When dealing with the DOM you should always code defensively and ensure that an element actually exists before trying to use it.

var nav = document.querySelector('.navv'),
  nav_height,
  nav_links,
  sticky_class = 'is-fixed';

if (nav) {
  // Calling global functions explicitly is good style
  nav_height = window.getComputedStyle(nav).height.split('px')[0];
  nav_links = document.querySelector('.nav-links');
}

function stickyScroll(e) {
  if( window.pageYOffset > (nav_height) ) {
    nav_links.classList.add(sticky_class);
  }

  if( window.pageYOffset < (nav_height) ) {
    nav_links.classList.remove(sticky_class);
  }
}

Better yet would be to refactor:

function stickyScroll(e, nav_links) {
  var nav_height = e.offsetHeight,
      sticky_class = 'is-fixed';
  if( window.pageYOffset > (nav_height) ) {
    nav_links.classList.add(sticky_class);
  }
  if( window.pageYOffset < (nav_height) ) {
    nav_links.classList.remove(sticky_class);
  }
}

Because if you are using this as an event handler when the window is resized that you will need reevaluate the height of .navv.

edited Dec 13, 2015 at 7:53

answered Dec 13, 2015 at 7:41

max

103k15 gold badges114 silver badges178 bronze badges

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

1 Comment

max Over a year ago

This is quite different if you are used to jQuery since it will allow you to call many functions on an empty set.

Collectives™ on Stack Overflow

How to get Javascript function to work in Rails app?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related