Question

我有一个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为null

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

Answer 1

我猜你在<head>标签中有这个脚本。将它放在<body>结束之前。请记住，浏览器从上到下阅读，因此如果您尝试在浏览器找到之前选择ID为customername的元素，则会返回null。

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

document.addEventListener('DOMContentLoaded', checkName);

只有在解析了所有HTML后才会运行checkName（包括ID为customername的元素）。

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

1 个答案: