javascript - 一段JS代码，在在<script>标签内好用，放在单独文件（.js）里就不好用了-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI聊天问答 Agent智能体 AI文本写作 AI绘画作图 AI设计工具 AI视频创作 AI音频制作 AI办公学习 AI编程开发 AI提示词

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

javascript - 一段JS代码，在在<script>标签内好用，放在单独文件（.js）里就不好用了

PHP中文网 2017-04-11 12:08:48

[JavaScript讨论组]

387

把这端放到js里面就不起作用了怎么办，难道必须用jq写吗

PHP中文网

认证高级PHP讲师

全部回复(6)

天蓬老师2017-04-11 12:10:48 6楼

有什么问题？我直接把你的代码分开在单独的js中也是没问题的。

test.html

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
</head>
<body>
    <strong id="syhw"></strong>
    <script src='test.js'></script>
</body>
</html>

test.js

var hours =  (new Date()).getHours();
var syhw1 = document.getElementById("syhw");

if(hours<10&&hours>=8) {
    syhw1.innerHTML="13";

} else if(hours<12&&hours>=10) {//预约剩余10
    syhw1.innerHTML="10";
} else if(hours<16&&hours>=12) {//预约剩余7
    syhw1.innerHTML="7";
} else {
    syhw1.innerHTML="5";
}

赞 +0

添加回复

伊谢尔伦2017-04-11 12:10:48 5楼

你把js分离出去了，然后没有在当前页面中调用，所以就不好用喽

赞 +0

添加回复

PHPz2017-04-11 12:10:48 4楼

这里应该保证 javascript 代码是在DOM加载完后再执行

赞 +0

添加回复

高洛峰2017-04-11 12:10:48 3楼

要看你把引用外部脚本的代码放在head里面的还是在获取的DOM元素之后。

放在head元素里面使用,请使用defer属性。例如：

<script src="test.js" defer="defer"></script>

注意：这个只有在IE10以下版本才有效

放在DOM元素之后。例如：

<strong id="syhw"></strong>
<script src='test.js'></script>

或者放body元素的最后面

这里最关键的一点就是外部脚本要获取DOM对象应该在DOM加载完成之后才能获取到

赞 +0

添加回复

迷茫2017-04-11 12:10:48 2楼

你可以把 script 标签放到页面的最底部。

这样可以保证加载完DOM后才开始执行JS

赞 +0

添加回复

迷茫2017-04-11 12:10:48 1楼

首先，代码是没有问题的，放入单独文件里不管用可能是如下原因：、

你没有在html内引用js文件，或者文件名写错。
要再DOM就绪后才能获取DOM元素。

<strong id="syhw"></strong>
<script src="js.js"></script>

与

<script src="js.js"></script>
<strong id="syhw"></strong>

是不同的，第二种情况会报错。
有以下解决方法

window.onload = function(){// 文档就绪
    //你的js代码
}

或者

document.addEventListener("DOMContentLoaded", function(event) {// DOM就绪
    //你的js代码
});

还有就是daves2009答主说的，为script加defer属性

<strong id="syhw"></strong>
<script src="js.js" defer="defer"></script><!-- 文档下载但异步执行 -->

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>