为什么不是'；当我在html文件的head标记之间引用外部文件时，JavaScript是否运行？_Javascript_Html_Dom

为什么不是'；当我在html文件的head标记之间引用外部文件时，JavaScript是否运行？

javascript html dom

为什么不是'；当我在html文件的head标记之间引用外部文件时，JavaScript是否运行？,javascript,html,dom,Javascript,Html,Dom,当我将指向JS文件的链接放在html头标记之间时，JS文件将不会运行。但是，如果我将外部js链接放在body标记之后，或者放在大部分html代码之后，文件就会运行。当我将外部文件链接到head标记之间时，是否有办法使外部js文件运行。我还应该提到，我正在外部js文件中执行HTMLDOM HTML部分： <!DOCTYPE html> <html> <head> <title>HTMLDOM Practice</title>

当我将指向JS文件的链接放在html头标记之间时，JS文件将不会运行。但是，如果我将外部js链接放在body标记之后，或者放在大部分html代码之后，文件就会运行。当我将外部文件链接到head标记之间时，是否有办法使外部js文件运行。我还应该提到，我正在外部js文件中执行HTMLDOM

HTML部分：

<!DOCTYPE html>

<html>
<head>
    <title>HTMLDOM Practice</title>
    <link rel="stylesheet" type="text/css" href="HTMLDOM Practice.css"/>
    <!--I would like to put external js file here-->
</head>
<body>
    <div id="box">
        <p id="txt">Hello World!</p>
    </div>
</body>
    <script src="HTMLDOM Practice.js"></script>
</html>

我知道仅仅为了使用DOM而将JS代码放在页面底部会很烦人。作为一个很好的练习，我通常在头部加载JS

你可以解决类似的问题。 1）在JS文件中放置一个进行初始化的函数 2）调用初始化函数OnLoad

JS文件如下所示

var x;
var b;

function irt(){
    x.innerHTML="Goodbye world!";
    b.style.padding="20px"; 
} 

function setEverything(){
    x = document.getElementById('txt'); 
    b = document.getElementById('box');

    x.addEventListener('click',irt,false);
    b.addEventListener('click',irt,false);
}

HTML正文标记

<body onload="setEverything()">

我看到的问题是，在DOM完成加载之前，JS正在运行。要解决此问题，只需将

defer

添加到

script

标记中，该标记将延迟JS的执行，直到其他所有操作完成：

此外，如果浏览器支持，您可以使用

async

选择异步下载和执行JS文件。您可以将此功能与

defer

结合使用，以在不同浏览器中获得最佳效果：

脚本试图获取不存在的元素。Ur txt和box元素在脚本运行后才会声明，因此脚本会出错。您如何解决这个问题，因为我不是已经在js中将我的两个html元素声明为var x和var b了吗？我找到了缺失的代码行，可以让它正常工作。我记得在YouTube上看了一个教程，忘了你需要这行代码窗口；初始化元素以便脚本可以捕获它们！

<body onload="setEverything()">