Question

我正在遵循这个教程https://www.youtube.com/watch?v=b4GwvdhrEQg&t=537s，并且在5:13他的原型工作，但我的原型没有。我收到了这篇文章标题中解释的错误

未捕获的TypeError：无法读取null的属性“addEventListener” 在window.onload（rico-beweeg-oog.html：29）window.onload @ rico-beweeg-oog.html：29

我找不到任何代码问题或解决方案，我已将代码放在代码中的任何地方，在div元素之前和之后，但它只是不起作用。

代码：

<!DOCTYPE HTML>

<html>
<head>

<style>
#rico {
    width: 1280px;
    height: 1060px;
    overflow: hidden;
    background-color: #efefef;
    cursor: pointer;

}

#ricobox {
    width: 75px;
    height: 75px;
    background-color: rgb(0,255,0);
    border-radius: 50%;
    border: 15px rgb(255,0,0) solid;
    transform: translate3d(50px, 50px, 0);
}
</style>

<script>
window.onload = function () {
var rico = document.getElementById('#ricobox');
var container = document.getElementById('#rico').addEventListener("click", klikPositie, false);

alert();

function klikPositie(e) {
    var xPosition = e.clientX;
    var yPosition = e.clientY;

    var translate3dValue = "translate3d(" + xPosition + "px," + yPosition + "px, o)";
    rico.style.transform = translate3dValue;
}
}
</script>

</head>

<body>

    <div id="rico">
        <div id="ricobox"></div>
    </div>

</body>

</html>

Answer 1

您收到错误是因为您的ID实际上是 ricobox 和 rico 而没有英镑字符。

所以

var rico = document.getElementById('ricobox');
var container = document.getElementById('rico').addEventListener("click", klikPositie, false);

应该有用。

如果您使用的是jQuery，则需要使用＃字符$("#rico")与document.getElementById('rico')

相同

工作fiddle

Answer 2

<script>
window.onload = function () {
var rico = document.getElementById('ricobox');
var container = document.getElementById('rico').addEventListener("click", klikPositie, false);

alert();

function klikPositie(e) {
    var xPosition = e.clientX;
    var yPosition = e.clientY;

    var translate3dValue = "translate3d(" + xPosition + "px," + yPosition + "px, 0px)";
    rico.style.transform = translate3dValue;
}
}
</script>

获取元素ID和您的translate3d

时出现错误

未捕获的TypeError：无法在window.onload

2 个答案: