我正在使用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;
}
代码正在运作。为什么这样工作?请帮助
谢谢。
答案 0 :(得分:3)
让我们了解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
答案 1 :(得分:1)
检查一下,将脚本放在页面底部,
表示仅在呈现页面
之后初始化div
变量
<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;
答案 2 :(得分:1)
您尝试在加载display
元素之前访问它。您必须将脚本放在HTML文件的较低位置,或者使其在文档的onLoad
函数中执行。
document.onload = function() {
//run your code here
}
答案 3 :(得分:0)
不工作第一种方法,因为您尝试访问尚未加载的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;
}