如何讓JavaScript函數在Rails應用程序中工作？

Question

我收到此錯誤信息：

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

，並且被標記的代碼第二條線

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

我在一個靜態網頁轉換成on Rails應用程序一個Ruby的中間並且這段代碼在原始項目上工作得很好，但是我在Rails上收到了這條錯誤消息。我如何讓這段代碼再次工作？

下面是函數的做參考的其餘部分：

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); 

} 
} 

Answer 1

你實際上並沒有檢查，如果該元素調用window.getComputedStyle之前就存在。

Document.querySelector()
返回null如果沒有找到匹配;否則，它返回第一個匹配元素。
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

當與DOM，你應該總是防守處理代碼，並確保元素嘗試使用它之前確實存在。

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); 
    } 
} 

更重要的是將重構：

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); 
    } 
} 

因爲如果你正在使用這個作爲一個事件處理程序，窗口大小，你將需要重新評估的.navv高度。