当我将脚本元素放在头部以从URL加载它时，我的Javascript不起作用 [英] My Javascript doesn't work when I put a script element in the head to load it from a URL
问题描述
我已经为一个简单的函数内联编写了代码，但是当我创建一个单独的js.file时，由于某种原因它并不想工作.我已经尝试了所有感觉，但也许我疲倦的眼睛无法解决问题！
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!
<!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>
这个想法是要有三个按钮，当您单击其中一个按钮时，只会显示一个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.
这是JavaScript(内联效果很好):
Here is the JavaScript (that worked perfectly fine inline):
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';
}
}
}
推荐答案
将脚本放入外部文件中，然后从<head>加载该外部脚本时，它将在DOM准备就绪之前加载.这意味着，如果您的脚本像使用document.querySelectorAll()一样尝试引用页面中的元素，那么这些元素将不存在.
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.
最简单的解决方法是简单地移动脚本标签:
The simpleset way to fix that is to simply move the script tag:
<script type="text/javascript" src="menu.js"></script>
在</body>之前.然后，在脚本运行如下之前，将解析页面中的所有元素并在DOM中进行解析:
to right before </body>. Then, all the elements of the page will be parsed and in the DOM before your script runs like this:
<!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>
或者，您可以使用一个脚本，该脚本将在DOM准备就绪时通知您，然后可以调用您的代码.
Alternately, you can use a script that will notify you when the DOM is ready and you can then call your code.
See this reference and highly voted answer for 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.
这篇关于当我将脚本元素放在头部以从URL加载它时，我的Javascript不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
