Question

<html>
<style>
#myA {
    height: 300;
    width: 300;
    background: green;
}
</style>
<body>
<script language="JavaScript">

document.getElementById('myA').onmousedown = function() {
    var a = document.getElementById('myA');
    console.log(a);
}
</script>
<div id="myA"></div>
</body>
</html>

请问，为什么上面的代码不起作用？当我想编写console.log时，我什么也得不到，null值。

Answer 1

当您的脚本运行时，myA元素尚不存在。之一：

将您的脚本移至页面末尾
将它放在您从页面末尾的另一个脚本块调用的命名函数中
将您的代码放入window.onload
使用jQuery在构建DOM之后通过$()。

Answer 2

您必须在该div下面编写脚本。因为div尚未加载。或者您可以在文档准备就绪时编写函数和函数调用。

Answer 3

将代码包装在函数中并将其附加到window.onload事件，如下所示：

window.onload = function(e) {
    document.getElementById('myA').onmousedown = function() {
        var a = document.getElementById('myA');
        console.log(a);
    };
};

正如其他人所说，这是因为你试图将一个事件附加到一个尚未加载的元素上。

document.getElementById（）。onmousedown不起作用

3 个答案: