zoukankan      html  css  js  c++  java
  • 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文件中内容很多时加载需要一定时间,意味着后面的内容还未解析在界面,此时浏览器的界面一片空白,容易造成体验差;

    如有不对,欢迎指正,谢谢!

  • 相关阅读:
    C语言集锦(一) C代码生成图片:BMP、PNG和JPEG
    Win32 OpenGL标准例子
    Tcc学习笔记(一) 开篇
    C语言集锦(二) 图像显示 Windows和Linux
    矢量图和Word:EPS,PDF,EMF和SVG
    firefox浏览器无法显示bootstrap图标问题总结
    现代字体栈
    jquery 插件大全
    meta 详解,html5 meta 标签日常设置
    工厂方法模式Factory Method(Java实现)
  • 原文地址:https://www.cnblogs.com/xiao-baobao/p/10111003.html
Copyright © 2011-2022 走看看