HTML中引用外部JS檔案失效原因
阿新 • • 發佈：2018-12-12
今天在練習中碰到“引用外部的一個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檔案中內容很多時載入需要一定時間，意味著後面的內容還未解析在介面，此時瀏覽器的介面一片空白，容易造成體驗差；
如有不對，歡迎指正，謝謝！
，