在页面加载时使用 Shopify 运行 Javascript 函数答案

【问题标题】：Running Javascript function with Shopify on page load在页面加载时使用 Shopify 运行 Javascript 函数
【发布时间】：2014-02-19 20:28:52
【问题描述】：

我有一个 javascript 函数，我想在我的 Shopify 网站上的页面加载时运行它，它会检查用户的用户名是否超过 24 个字符，如果是，则将其分成两行：

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 为空

我认为这是因为 Shopify 需要一秒钟来获取用户名并填充我尝试在函数的不同位置添加 setTimeout 的元素 - 但它仍然导致 null。

【问题讨论】：

标签： javascript shopify

【解决方案1】：

我猜你在<head> 标签中有那个脚本。将其放在<body> 的末尾之前。请记住，浏览器从上到下读取，因此如果您在浏览器找到之前尝试选择 id 为 customername 的元素，它将返回 null。

或者，您只能在页面完成加载时调用该函数：

document.addEventListener('DOMContentLoaded', checkName);

只有在你的所有 HTML 都被解析后才会运行 checkName（包括 id 为 customername 的元素）。

【讨论】：

没问题。我发现很多初学者都遇到了这个问题。