HTML中引用外部JS文件失效原因
今天在练习中碰到“引用外部的一个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文件失效原因的更多相关文章
- vue2项目中引用外部js文件
vue2项目目录如下(utils文件夹是自己手工建的,然后在utils里新建js文件): 使用import导入文件时,注意路径,路径不对会报错: 导入之后使用外部js函数时,直接写导入时的名字加小括号 ...
- win7,vs2010,asp.net项目中修改外部js文件，在调试时加载的还是旧文件
win7,vs2010,asp.net项目中修改外部js文件,在调试时加载的还是旧文件 我杀过 w3wp.exe和asp.net_state的进程,重启 iis admin的服务,都还是不行. 只是把 ...
- javascript 多线程Web Worker不引用外部js文件的方法
最近在Android开发中 Webview通过调用JavascriptInterface的方式与App交互 在交互的过程中,有些App上的操作时间会比较长,Web中调用的话会造成程序假死的情况 于是想 ...
- javascript （六） 引用外部js文件
外部的 JavaScript 也可以把脚本保存到外部文件中.外部文件通常包含被多个网页使用的代码. 外部 JavaScript 文件的文件扩展名是 .js. 如需使用外部文件,请在 <scrip ...
- html中引入外部js文件，使用外部js文件里的方法
外部js文件1: /** * 加了window.onload 后,直接引入js文件即可 * 页面资源全部加载完毕后会自动调用window.onload里的回调函数 */ window.addEvent ...
- 前端设计中关于外部js文件加载的速度优化
在一般情况下,许多人都是将<script>写在了<head>标签中,而许多浏览器都是使用单一的线程来加载js文件的,从上往下,从左往右. 若是加载过程出错,那么网页就会阻塞,就 ...
- nodejs中引用其他js文件中的函数
基本语句 require('js文件路径'); 使用方法 举个例子,在同一个目录下,有app.fun1.fun2三个js文件. 1. app.js var fun1 = require('./fun1 ...
- js文件中引用其他js文件
这一个功能的作用是做自己的js包时,可以通过引入一个整体的js文件而引入其他js. 只需要在总体的js加上这一句话 document.write("<script type='text ...
- smbms系统中引用的js文件出现乱码
问题如下显示: 时间显示出现了乱码,找到显示该时间的js文件,定位问题出现的地方. 解决方案: 改变该文件的编码方式,这里的使用了vscode进行改变js文件的编码方式 步骤如下: 使用vscode打 ...
随机推荐
- jQuery学习--Code Organization Concepts
jQuery官方文档: http://learn.jquery.com/code-organization/concepts/ Code Organization Concepts(代码组织概念) ...
- 在CentOS 7中安装与配置Tomcat-8.5方法
安装说明 安装环境:CentOS-7 安装方式:源码安装 软件:apache-tomcat-8.5.39.tar.gz下载地址:http://tomcat.apache.org/download-80 ...
- session删除
<?php session_start(); //删除session $_SESSION=array(); //删除客户端cookie中存储的sessionID值 if(isset($_COOK ...
- shell printf命令：怎样格式化输出语句
printf 命令用于格式化输出, 是echo命令的增强版.它是C语言printf()库函数的一个有限的变形,并且在语法上有些不同. 注意:printf 由 POSIX 标准所定义,移植性要比 ech ...
- timer控件、三级联动、帐号激活权限设置
一.Timer控件 Timer实际就是一个线程控件. 属性:Enabled 是否被启用 Interval 多长时间执行一次控件中的代码 事件: Tick 事件中放要执行的代码. ...
- restful规范快速记忆
restful规范: 十个规则: 用户发来请求,url必须: 1.因为是面向资源编程,所以每个URL代表一种资源,URL中尽量不要用动词,要用名词 2.尽量使用HTTPS,https代替http 3. ...
- 艾妮记账本Web开发（开发版）
因为没有办法制作微信小程序版的艾妮记账本所以只能选择做Web开发版,但因为是花时间赶出来到的(但用了我已学的所有Web知识)所以就没有办法按老师的要求写七天的制作过程. 其实真正说起来我的这个Web开 ...
- MySQL删除命令_DELETE
单表删除语句: DELETE [LOW_PRIORITY][IGNORE] FROM tbl_name [WHERE where_definition] [ORDER BY ...] ...
- php 固定红包 + 随机红包算法
<?php /** * 随机红包+固定红包算法[策略模式] * copyright (c) 2016 http://blog.csdn.net/CleverCode */ //配置传输数据DTO ...
- Python select实现socket并发
Python select Python的select()方法直接调用操作系统的IO接口,它监控sockets,open files, and pipes(所有带fileno()方法的文件句柄)何时 ...