Tom*_*Lud 2 html javascript codepen
我正在尝试使用index.html文件和script.js文件运行简单的几行代码,没有别的.
在HTML文件中,我有doctype html:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="javascript/script.js"></script>
</head>
<body>
<div id="content1">This is content 1 </div>
<div id="content2">This is content 2 </div>
<div id="content3">This is content 3 </div>
</body>
</html>
对于我的javascript部分,我有:
var elems = $("div");
if (elems.length) {
var keep = Math.floor(Math.random() * elems.length);
for (var i = 0; i < elems.length; ++i) {
if (i !== keep) {
$(elems[i]).hide();
}
}
}
当我在CodePen中运行它,甚至在本网站上的代码编辑器中运行时,它运行正常.但是当我在桌面上使用这些文件时,它不起作用(index.html,script.js我相信文件夹结构是正确的(script.js在javascript文件夹中.)
谢谢你们
在关闭body标签之前移动脚本标记:
<script src="javascript/script.js"></script>
</body>
这样,当脚本运行时,DOM将可用.
如果您希望将脚本保留在head部件中,请将代码包装在DOMContentLoaded事件处理程序中:
document.addEventListener("DOMContentLoaded", function() {
var elems = $("div");
if (elems.length) {
var keep = Math.floor(Math.random() * elems.length);
for (var i = 0; i < elems.length; ++i) {
if (i !== keep) {
$(elems[i]).hide();
}
}
}
});
...以便在DOM准备好时运行代码.
您没有标记您的问题jquery,但是当您似乎使用它时,您可以使用此更短的代码执行与上述基本相同的操作:
$(function() {
var $elems = $("div").hide(),
$elems.eq(Math.floor(Math.random() * $elems.length)).show();
});