今天在练习中碰到“引用外部的一个js文件但是却失效”的情况，实在不懂，百度后才知是引用的位置不对，错误的代码如下：

<head>

    <meta charset="UTF-8">

    <title>Day16</title>

    <script type="text/javascript" language="javascript" src="Day16.js" charset="utf-8"></script>

</head>

<body>

   <input id="first-number" type="number" value="0" placeholder="第一个数字">

   <input id="second-number" type="number" value="0" placeholder="第二个数字">

   <button id="add-btn">加</button>

   <button id="minus-btn">减</button>

   <button id="times-btn">乘</button>

   <button id="divide-btn">除</button>

   <p id="result">运算结果</p>

原本是需要没点击一个按钮，相应的运算后的结果要在下方的result中显示，但是结果毫无反应，浏览器报错，但是把引用的位置调到body中就ok了

<head>

    <meta charset="UTF-8">

    <title>Day16</title>

</head>

<body>

   <input id="first-number" type="number" value="0" placeholder="第一个数字">

   <input id="second-number" type="number" value="0" placeholder="第二个数字">

   <button id="add-btn">加</button>

   <button id="minus-btn">减</button>

   <button id="times-btn">乘</button>

   <button id="divide-btn">除</button>

   <p id="result">运算结果</p>

   <script type="text/javascript" language="javascript" src="Day16.js" charset="utf-8"></script>

</body>

结果就OK了，由于js文件中多次从Body中获取元素，而我们知道，HTML文档在浏览器中的解析顺序是自上而下，所以，如果把js文件放在header中会报错，无效；

再一方面来说，由于浏览器解析的特性，将js文件放在头部中，当我们的js文件中内容很多时加载需要一定时间，意味着后面的内容还未解析在界面，此时浏览器的界面一片空白，容易造成体验差；

如有不对，欢迎指正，谢谢！

，

HTML中引用外部JS文件失效原因的更多相关文章

  1. vue2项目中引用外部js文件

    vue2项目目录如下(utils文件夹是自己手工建的,然后在utils里新建js文件): 使用import导入文件时,注意路径,路径不对会报错: 导入之后使用外部js函数时,直接写导入时的名字加小括号 ...

  2. win7,vs2010,asp.net项目中修改外部js文件，在调试时加载的还是旧文件

    win7,vs2010,asp.net项目中修改外部js文件,在调试时加载的还是旧文件 我杀过 w3wp.exe和asp.net_state的进程,重启 iis admin的服务,都还是不行. 只是把 ...

  3. javascript 多线程Web Worker不引用外部js文件的方法

    最近在Android开发中 Webview通过调用JavascriptInterface的方式与App交互 在交互的过程中,有些App上的操作时间会比较长,Web中调用的话会造成程序假死的情况 于是想 ...

  4. javascript （六） 引用外部js文件

    外部的 JavaScript 也可以把脚本保存到外部文件中.外部文件通常包含被多个网页使用的代码. 外部 JavaScript 文件的文件扩展名是 .js. 如需使用外部文件,请在 <scrip ...

  5. html中引入外部js文件，使用外部js文件里的方法

    外部js文件1: /** * 加了window.onload 后,直接引入js文件即可 * 页面资源全部加载完毕后会自动调用window.onload里的回调函数 */ window.addEvent ...

  6. 前端设计中关于外部js文件加载的速度优化

    在一般情况下,许多人都是将<script>写在了<head>标签中,而许多浏览器都是使用单一的线程来加载js文件的,从上往下,从左往右. 若是加载过程出错,那么网页就会阻塞,就 ...

  7. nodejs中引用其他js文件中的函数

    基本语句 require('js文件路径'); 使用方法 举个例子,在同一个目录下,有app.fun1.fun2三个js文件. 1. app.js var fun1 = require('./fun1 ...

  8. js文件中引用其他js文件

    这一个功能的作用是做自己的js包时,可以通过引入一个整体的js文件而引入其他js. 只需要在总体的js加上这一句话 document.write("<script type='text ...

  9. smbms系统中引用的js文件出现乱码

    问题如下显示: 时间显示出现了乱码,找到显示该时间的js文件,定位问题出现的地方. 解决方案: 改变该文件的编码方式,这里的使用了vscode进行改变js文件的编码方式 步骤如下: 使用vscode打 ...

随机推荐

  1. ubuntu 使用dpkg手动安装deb包时发生循环依赖的解决办法

    将循环依赖的所有包放到同一个命令行里一起安装,如: sudo dpkg -i libnss3-nssdb_3.28.4-0ubuntu0.14.04.4_all.deb libnss3_3.28.4- ...

  2. openshift 容器云从入门到崩溃之八《日志聚合》

    日志可以分为两部分 业务日志 业务日志一般是要长期保留的,以供以后有问题随时查询,elk是现在比较流行的日志方案,但是容器日志最好不要落地所以不能把logstash客户端包在容器里面 可以使用logs ...

  3. RabbitMQ:Docker环境下搭建rabbitmq集群

    RabbitMQ作为专业级消息队列:如何在微服务框架下搭建 使用组件 文档: https://github.com/bijukunjummen/docker-rabbitmq-cluster 下载镜像 ...

  4. Oracle 24角色管理

    了解什么是角色 Oracle角色(role)就是一组权限(或者说是权限的集合). 用户可以给角色赋予指定的权限,然后将角色赋给相应的用户. 三种标准的角色 connect(连接角色) 拥有connec ...

  5. 完成登录功能，用session记住用户名

    登录功能完成: js:设置return html:设置 form input py: @app.route设置methods GET POST 读取表单数据 查询数据库 用户名密码对: 记住用户名 跳 ...

  6. Linux服务器---百科mediawiki

    Mediawiki         Mediawiki是一个强大的维基软件,可以实现页面编辑.图像和多媒体管理. 1.下载mediawiki软件(“https://www.mediawiki.org/ ...

  7. 2440nandflash启动过程再学习

    2011-02-13 12:27:05 2440nandflash启动,先是nandflash的前4K自动复制到CPU的0x0地址开始的4K区域. 然后CPU开始运行这4K(刚才copy过来的代码), ...

  8. 石家庄铁道大学课程信息管理系统（javaWeb+servlet+Mysql）

    实现网页版的课程管理系统,具有增删改查的功能. 1.首先连接数据库,具体数据库的使用及如何连接eclipse,参考     https://blog.csdn.net/lrici/article/de ...

  9. JavaScript 序列化、转义

    JavaScript  序列化.转义 序列化 // 将对象转换为字符串 JSON.stringify() // 将字符串转换为对象类型 JSON.parse() 转义 // URl中未转义的字符 de ...

  10. topcoder srm 565 div1

    problem1 link $f[i][j]$表示经过前$i$个怪物之后,花费$j$个硬币可以得到的最大值. problem2 link 设$nim[i]$表示数字$i$的nim值.那么题目就是求有多 ...