Question

我正在使用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>

这里的webconsole div 显示为undefined但是如果我将函数声明为： -

  function foo(value) {
    let div = document.getElementById('display');
    div.innerHTML = value;
  }

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

Answer 1

让我们了解DOM解析在浏览器上的工作原理。

当我们在DOM / Browser上加载任何文档/ HTML时，它会启动文档解析。它迭代元素并创建DOM树。它从TOP开始，转到标题并检查其他资源并逐个执行。

这时你写的是

 let div = document.getElementById('display');

在简单的脚本标记中，没有将其包装到任何函数中，它首先执行而不会加载您的DOM。

这意味着，解析器正在通过其在浏览器上不存在的ID查找DIV。因此它是未定义的。现在问题是它在函数内部是如何工作的？

JavaScripts中的函数在DOMContentLoaded上执行。这类似于jQuery ready()。这确保了DOM已经准备就绪，浏览器上的每个元素都已遍历，现在位于DOM树中。

现在，当我们将此代码放在页面底部时，您可能会想到它是如何工作的？像

<html>
  <head></head>
  <body>
     YOUR HTML 
  </body>
  <script type="text/javascript">
      //YOUR JS CODE
  </script>

所以当我们插入JS时，在head标签页面顶部的DOM中寻找一个元素，如果在执行JS时出错（就像在你的情况下JS正在寻找不是DIV的那个）在DOM上）它将停止执行DOM，除非脚本解决了错误。

因此，当我们将JS代码放在页面底部时，浏览器已经解析了所有页面元素并且DOM树已准备就绪。因此，JS现在可以访问任何元素。

这意味着，如果您在页面底部编写上述代码，它将获得没有错误的元素。

脚注：

详细了解JavaScript如何在浏览器上运行 https://javascript.info/onload-ondomcontentloaded

Where should I put <script> tags in HTML markup?

希望这有帮助，

由于 -AG

Answer 2

检查一下，将脚本放在页面底部，

表示仅在呈现页面

之后初始化div变量

＆＃13;

<html>

<head>
  <meta charset="utf-8">
  <title>Slider and range !!</title>
  <script type="text/javascript">
    let div;

    function onLoadFunction() {
      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 onLoad="onLoadFunction()">
  <input id="input" type="range" min='0' max='100' step="10" oninput="foo(this.value)">
  <div id="display"></div>
</body>


</html>

＆＃13;

Answer 3

您尝试在加载display元素之前访问它。您必须将脚本放在HTML文件的较低位置，或者使其在文档的onLoad函数中执行。

document.onload = function() {

    //run your code here
}

Answer 4

不工作第一种方法，因为您尝试访问尚未加载的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;
}

JavaScript中的范围错误

4 个答案: