当我将脚本元素放在头部以从 URL 加载它时，我的 Javascript 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28361475/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
My Javascript doesn't work when I put a script element in the head to load it from a URL
提问by asso
I have written the code for a simple function inline, but when i created a separate js.file it doesn't want to work for some reason. I've tried everything it feels like, but maybe my tired eyes can't something!
我已经为一个简单的内联函数编写了代码，但是当我创建一个单独的 js.file 时，它出于某种原因不想工作。我已经尝试了所有感觉，但也许我疲惫的眼睛不能做什么！
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="menu.js"></script>
</head>
<body>
<div class="container">
<button name="one">Button 1</button>
<p>
Lorem ipsum dolor sit amet
</p>
</div>
<div class="container">
<button name="two">Button 2</button>
<p>
Lorem ipsum dolor sit amet
</p>
</div>
<div class="container">
<button name="three">Button 3</button>
<p>
Lorem ipsum dolor sit amet
</p>
</div>
The idea is to have three buttons that when you click on one of them only one of the divs will be shown, and the other two will be hidden.
这个想法是拥有三个按钮，当您单击其中一个按钮时，只会显示其中一个 div，而其他两个将隐藏。
Here is the JavaScript (that worked perfectly fine inline):
这是 JavaScript（内联工作得非常好）：
var first_container = document.querySelectorAll(' div:not(:first-child) p');
for (var i = 0; i < first_container.length; i++) {
first_container[i].style.visibility = 'hidden';
}
var buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', clickHandler);
}
function clickHandler(e) {
e.preventDefault();
var text = document.querySelectorAll('p');
for (var i = 0; i < text.length; i++) {
if (text[i] === event.target.nextElementSibling) {
text[i].style.visibility = 'visible';
} else {
text[i].style.visibility = 'hidden';
}
}
}
回答by jfriend00
When you put the script in an external file and then load that external script from the <head>, it loads BEFORE the DOM is ready. That means that if your script tries to reference elements in the page like you are with document.querySelectorAll(), those elements will not exist yet.
当您将脚本放在外部文件中，然后从 加载该外部脚本时<head>，它会在 DOM 准备好之前加载。这意味着，如果您的脚本尝试像使用 一样引用页面中的document.querySelectorAll()元素，则这些元素尚不存在。
The simpleset way to fix that is to simply move the script tag:
解决这个问题的简单方法是简单地移动脚本标签：
<script type="text/javascript" src="menu.js"></script>
to right before </body>. Then, all the elements of the page will be parsed and in the DOM before your script runs like this:
就在之前</body>。然后，在脚本运行之前，页面的所有元素都将被解析并在 DOM 中，如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<div class="container">
<button name="one">Button 1</button>
<p>
Lorem ipsum dolor sit amet
</p>
</div>
<div class="container">
<button name="two">Button 2</button>
<p>
Lorem ipsum dolor sit amet
</p>
</div>
<div class="container">
<button name="three">Button 3</button>
<p>
Lorem ipsum dolor sit amet
</p>
</div>
<script type="text/javascript" src="menu.js"></script>
</body>
</html>
Alternately, you can use a script that will notify you when the DOM is ready and you can then call your code.
或者，您可以使用脚本在 DOM 准备就绪时通知您，然后您可以调用您的代码。
See this reference and highly voted answerfor a plain Javascript and cross browser way of waiting until the DOM is ready if you'd rather keep your code in the <head>section or make it so you code can be located anywhere.
如果您希望将代码保留在该部分中或使其代码可以位于任何地方，请参阅此参考资料和高度投票的答案，了解等待 DOM 准备就绪的纯 Javascript 和跨浏览器方式<head>。
回答by Md. Ashaduzzaman
Try onload()event of javascript. It happens because when you are adding your script inside the <head>..</head>your script starts working immediately before the web page is even loaded. So to handle this you need to make sure that your script starts working after the page has been completely loaded. And for that write your javascript code or function that you need to make work after complete page load inside window.onload = function(){ //here your code goes };
尝试onload()javascript 事件。发生这种情况是因为当您将脚本添加到<head>..</head>您的脚本中时，您的脚本甚至会在网页加载之前立即开始工作。因此，要处理此问题，您需要确保您的脚本在页面完全加载后开始工作。并为此编写您需要在完成页面加载后工作的 javascript 代码或函数window.onload = function(){ //here your code goes };
Update your menu.jsfile as follows :
更新您的menu.js文件如下：
javascript :menu.js
javascript :menu.js
window.onload = function(){
// your javascript code goes here...
};
References :onload()
参考资料：onload()
回答by Quentin
When you moved the script from being inline to being external you alsomoved the script tag to the <head>.
当您将脚本从内联移动到外部时，您还将脚本标记移动到<head>.
Now the script runs before any element that matches div:not(:first-child) pexists so first_containerdoesn't have any elements in it.
现在脚本在任何匹配的元素div:not(:first-child) p存在之前运行，因此其中first_container没有任何元素。
Move the script element back to where it was before.
将脚本元素移回原来的位置。
Alternatively, move the code you have into a function and then run that function after the document has loaded (e.g. with addEventListener('load', your_function)).
或者，将您拥有的代码移动到一个函数中，然后在文档加载后运行该函数（例如使用addEventListener('load', your_function)）。
