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显示~~我的坏，隐藏的输入类型为＃34;电子邮件＆＃34;
~~在每个输入上如果它们通过ajax~~ 重新加载我发现了原因：由于该功能仅在窗口加载时触发，因此它不会看到加载的输入

Answer 1

通常，脚本标记的放置会影响您的DOM选择。因此，请确保在body标记结束之前将脚本标记放在html文件的底部。也许这将解决问题！

Answer 2

尝试使用addEventListener附加功能，而不是设置window.onload：

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

如果这解决了你的问题，那么就像@adeneo所说的那样，window.onload被分配到脚本的其他地方，它会覆盖它可以拥有的任何其他值。
这就是为什么一般来说，使用addEventListener会更好，因为您可以根据需要多次调用它而不会覆盖任何内容。

但问题可能还在于您的脚本根本没有被评估，您是否尝试在其中放置一些顶级console.log？

Answer 3

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

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

要

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

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

放入外部js文件时，QuerySelectorAll无法正常工作

3 个答案: