JavaScript中的作用域错误_Javascript_Html_Dom_Html Parsing

JavaScript中的作用域错误

javascript html dom

JavaScript中的作用域错误,javascript,html,dom,html-parsing,Javascript,Html,Dom,Html Parsing,我在用javascript玩html中的输入[range]。我提出了一个问题。代码如下：- <html> <head> <meta charset="utf-8"> <title>Slider and range !!</title> <script type="text/javascript"> let div = document.getElementById('display'); function foo(val

我在用javascript玩html中的输入[range]。我提出了一个问题。代码如下：-

<html>
<head>
<meta charset="utf-8">
<title>Slider and range !!</title>
<script type="text/javascript">
let div = document.getElementById('display');
  function foo(value) {

    div.innerHTML = value;
  }
</script>
<style>
input[type='range']{
  border : 5px grey solid;
  border-radius: 10px;
}
</style>
</head>
<body>
  <input id="input" type="range" min = '0' max ='100' step="10" oninput="foo(this.value)" >
  <div id="display"></div>
</body>
</html>

代码正在工作。为什么这样工作？请帮助
谢谢。

检查此项，在页面底部提供脚本

表示仅在呈现页面后初始化

div

变量


滑块和范围！！
让div；
函数onLoadFunction（）{
div=document.getElementById（'display'）；
}
函数foo（值）{
div.innerHTML=值；
}
输入[type='range']{
边框：5px灰色实心；
边界半径：10px；
}

检查此项，在页面底部给出脚本

表示仅在呈现页面后初始化

div

变量


滑块和范围！！
让div；
函数onLoadFunction（）{
div=document.getElementById（'display'）；
}
函数foo（值）{
div.innerHTML=值；
}
输入[type='range']{
边框：5px灰色实心；
边界半径：10px；
}

您尝试在加载

显示元素之前访问它。您必须将脚本放在HTML文件的较低位置，或者让它在文档的onLoad
功能处执行
document.onload = function() {

    //run your code here
}

在加载显示
元素之前，尝试访问该元素。您必须将脚本放在HTML文件的较低位置，或者让它在文档的onLoad
功能处执行
document.onload = function() {

    //run your code here
}

让我们了解DOM解析如何在浏览器上工作
当我们在DOM/Browser上加载任何文档/HTML时，它就会开始文档解析。它迭代元素并创建DOM树。它从顶部开始，转到页眉，检查其他资源并逐个执行
你写信的时候在这里
 let div = document.getElementById('display');

在没有将其包装到任何函数的简单脚本标记中，它首先执行，而不加载DOM
这意味着，解析器正在根据其ID查找DIV，而该ID尚未出现在浏览器上。因此它是未定义的。现在的问题是它在函数中是如何工作的
JavaScripts中的函数在DOMContentLoaded
上执行。这类似于jqueryready（）
。这可以确保DOM已经准备好，浏览器上的每个元素都已被遍历，并且现在位于DOM树中
现在，你可能在想，当我们把这段代码放在页面底部时，它是如何工作的？像
<html>
  <head></head>
  <body>
     YOUR HTML 
  </body>
  <script type="text/javascript">
      //YOUR JS CODE
  </script>


你的HTML
//你的JS代码

因此，当我们在head标记的页面顶部插入正在DOM中查找元素的JS时，如果执行JS时出错（就像在您的例子中，JS正在查找尚未在DOM上的DIV），它将停止DOM的执行，除非脚本解决了错误
因此，当我们将JS代码放在页面底部时，浏览器已经解析了所有页面元素，DOM树已经就绪。因此，JS现在可以访问任何元素
这意味着，如果您在页面底部编写上述代码，它将无误地获取元素
脚注：
了解有关JavaScript如何在浏览器上工作的更多信息


希望这有帮助
谢谢
-让我们了解DOM解析在浏览器上的工作原理
当我们在DOM/Browser上加载任何文档/HTML时，它就会开始文档解析。它迭代元素并创建DOM树。它从顶部开始，转到页眉，检查其他资源并逐个执行
你写信的时候在这里
 let div = document.getElementById('display');

在没有将其包装到任何函数的简单脚本标记中，它首先执行，而不加载DOM
这意味着，解析器正在根据其ID查找DIV，而该ID尚未出现在浏览器上。因此它是未定义的。现在的问题是它在函数中是如何工作的
JavaScripts中的函数在DOMContentLoaded
上执行。这类似于jqueryready（）
。这可以确保DOM已经准备好，浏览器上的每个元素都已被遍历，并且现在位于DOM树中
现在，你可能在想，当我们把这段代码放在页面底部时，它是如何工作的？像
<html>
  <head></head>
  <body>
     YOUR HTML 
  </body>
  <script type="text/javascript">
      //YOUR JS CODE
  </script>


你的HTML
//你的JS代码

因此，当我们在head标记的页面顶部插入正在DOM中查找元素的JS时，如果执行JS时出错（就像在您的例子中，JS正在查找尚未在DOM上的DIV），它将停止DOM的执行，除非脚本解决了错误
因此，当我们将JS代码放在页面底部时，浏览器已经解析了所有页面元素，DOM树已经就绪。因此，JS现在可以访问任何元素
这意味着，如果您在页面底部编写上述代码，它将无误地获取元素
脚注：
了解有关JavaScript如何在浏览器上工作的更多信息


希望这有帮助
谢谢
-AG
第一种方法不起作用，因为您正在尝试访问尚未加载的DOM元素let div=document.getElementById（'display'）通过此代码，您可以立即尝试访问。当JS代码在全局范围内时，它是逐行解析的，所有的行都会立即执行
但是下面的代码可以正常工作，因为在这里，您访问函数范围中的DOM元素，并且函数仅在range
值发生变化时运行，同时DOM已经加载并可供操作
function foo(value) {
    let div = document.getElementById('display'); // Now `display` available, so no error
    div.innerHTML = value;
}

第一种方法不起作用，因为您正在尝试访问尚未加载的DOM元素let div=document.getElementById（'display'）通过此代码，您可以立即尝试访问。当JS代码在全局范围内时，它是逐行解析的，所有的行都会立即执行
但是下面的代码运行良好，因为这里