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

QuerySelectorAll not working when put in an external js file

本文关键字：文件 不起作用 js 外部 QuerySelectorAll      更新时间：2023-09-26

当我放入以下代码时：

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显示我的错误，隐藏的输入类型为"电子邮件"
  • 对于每一个输入，如果它们是通过ajax加载的，我发现了原因：因为该函数只有在窗口加载时才会启动，所以它看不到加载的输入

通常，脚本标记的位置会影响DOM的选择。因此，请确保您的脚本标记位于html文件的底部，刚好位于body标记的末尾之前。也许这会解决问题！

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

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

如果这解决了您的问题，那么正如@adeneo所说，window.onload将被分配到脚本的其他位置，从而覆盖它可能具有的任何其他值
这就是为什么一般来说，使用addEventListener更好，因为您可以随心所欲地调用它，而不会覆盖任何内容。

但问题也可能只是你的脚本根本没有被评估，你有没有尝试在其中放入一些顶级的console.log？

在评论/回答的用户的帮助下，我发现我尝试代码的一些输入类型是"电子邮件"，而不是"文本"，而在其他情况下，输入是通过ajax加载的，所以在加载DOM之后。为了解决这些问题，我编辑了

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

至

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

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

相关文章：