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功能

回答

相关问题