Question

<script>
    window.onload= function(){
        var a = document.getElementById('a');
        var b = document.getElementById('ct');
        setInterval('b.innerHTML = a.duration',1000);
   };
</script>
//Second  script
<script>
    var a = document.getElementById('a');
    var b = document.getElementById('ct');
    window.onload= function(){
        setInterval('b.innerHTML = a.duration',1000);
    };
</script>

为什么第一个脚本不起作用？

Chrome：

未捕获的ReferenceError：b未定义

Answer 1

您需要指定一个函数作为setInterval的参数，这里有问题：

setInterval('b.innerHTML = a.duration',1000);

应该是：

setInterval(function foo(){b.innerHTML = a.duration},1000);

Answer 2

我的猜测是：因为您在第一个脚本中var和a使用b。这使得变量是window.onload中的本地变量（而不是全局变量），setInterval中的代码无法访问它们。

删除var，它应该有效。

Answer 3

setInterval在全局范围内运行。您在setInterval中引用的无法从全局范围访问的任何变量（如第一个示例中的本地a和b）将在执行时未定义。

Answer 4

在第一个脚本中，“a”和“b”是在事件范围内定义的变量。 “setInterval”在文档（全局）范围中查找“innerHTML”属性。在第二个样本中，“a”和“b”在事件定义之外，即直接在文档范围中定义，因此它们通过“setInterval”函数进行重新计算。

Answer 5

您无法在.onload中引用文档元素，因为尚未加载文档。将代码移到</body>之前的文档末尾。

它还避免了.onload中多个事件处理程序的问题，因为您实际上覆盖了任何预先存在的事件处理程序。使用addEventListener附加事件处理程序。

像这样：

<body>

// markup

<script>
var a = document.getElementById('a');
var b = document.getElementById('ct');


setInterval('b.innerHTML = a.duration',1000);

</script>

</body>

为什么它在document.onload中不起作用？

5 个答案: