放入外部 js 文件时，QuerySelectorAll 不起作用

Question

当我输入这段代码时：

window.onload = function(){
    var inputs = document.querySelectorAll("input[type=text]");
    console.log(inputs.length);
    for(var j=0; j<inputs.length; j++){
        inputs[j].onclick = function(){
            this.style.width = "500px";
        }
    }
}

进入 html 页面，效果很好，但如果我将其放入外部 .js 文件，for 循环永远不会启动，因为 inputs.length 等于 0，即使在页面中也是如此调用脚本的输入有很多。可能是什么问题？

更新：我发现代码在正常情况下工作，但它不:

~~关于包含在之前隐藏的 div 中的输入和然后通过 js~~ 显示，我的错，隐藏输入的类型是 "email"
~~在每个输入上，如果它们是通过 ajax~~ 加载的，我发现了原因：因为该函数仅在 window 加载时触发，它不会看到加载的输入

Answer 1

尝试使用 addEventListener 附加您的函数，而不是设置 window.onload:

window.addEventListener(function() {
    //...
});

如果这解决了您的问题，那么正如@adeneo 所说，window.onload 正在脚本中的其他地方分配，这会覆盖它可能具有的任何其他值。
这就是为什么通常使用 addEventListener 更好，因为您可以根据需要多次调用它而不会覆盖任何内容。

但问题也可能只是根本没有评估您的脚本，您是否尝试将一些顶级 console.log 放在那里？

Answer 2

在 commented/answered 用户的帮助下，我发现我尝试使用代码输入的一些输入是 "email" 而不是 "text" 类型，而在其他情况下，输入是通过 ajax 加载的，因此在加载 DOM 之后。为了解决这些问题，我编辑了

var inputs = document.querySelectorAll("input[type=text]");

到

var inputs = document.querySelectorAll("input[type=text],input[type=email]");

当通过 ajax 加载的内容准备就绪时，我再次调用了该函数。

Answer 3

很多时候，脚本标签的位置会影响您的 DOM 选择。因此，请确保您的脚本标签位于 html 文件的底部，就在 body 标签结束之前。也许这会解决问题！

放入外部 js 文件时，QuerySelectorAll 不起作用

QuerySelectorAll not working when put in an external js file

javascript

onload

onload-event

selectors-api