HTML中引用外部JS文件失效原因-优快云博客

本文探讨了JavaScript文件在HTML文档中的加载位置对页面元素交互的影响，指出将JS文件放置于body标签内能确保元素加载完成后再进行交互操作，避免了加载顺序引起的错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在练习中碰到“引用外部的一个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>