Shopify在頁面加載時運行Javascript功能

我有一個javascript函數，我想在我Shopify網站的頁面加載上運行，它會檢查用戶的用戶名是否超過24個字符，如果是，則將其分爲兩行：Shopify在頁面加載時運行Javascript功能

function checkName() { 

    var customerName = document.getElementById('customername'); 

    if (customerName.innerHTML.length >= 24) { 
     var length = customerName.innerHTML.length; 
     var middle = Math.floor(length/2); 
     var firstHalf = customerName.innerHTML.slice(0, middle); 
     var secondHalf = customerName.innerHTML.slice(middle); 
     customerName.innerHTML = firstHalf + '<br />' + secondHalf; 
    } 
} 

checkName();

當我在控制檯中運行它，它工作正常。但鏈接到它作爲我的網站上的文件給我：

TypeError: customerName is null

我想，這是因爲它需要一秒鐘的Shopify來獲取用戶名和填充我試圖在不同的地方加入setTimeout元素函數 - 但它仍然導致null。

來源

2014-02-19 d.h276

我猜你在<head>標記中有該腳本。將它放在<body>結束之前。請記住，瀏覽器從上到下閱讀，所以如果您在瀏覽器找到之前嘗試選擇ID爲customername的元素，它將返回null。

或者，你只能打電話的時候，頁面已經完成了裝載功能：

document.addEventListener('DOMContentLoaded', checkName);

當你所有的HTML已被解析（包括與customername的ID的元素），這將只運行checkName 。

來源

2014-02-19 20:41:51 SomeKittens

謝謝，就是這樣！ –

沒問題。我發現很多初學者碰到這個問題。 – SomeKittens

Shopify在頁面加載時運行Javascript功能

回答

相關問題