2017-02-16 90 views
0

我正在關注本教程https://www.youtube.com/watch?v=b4GwvdhrEQg&t=537s和5:13他的原型工程,但我的原型沒有。我得到這個職位Uncaught TypeError:無法在window.onload處讀取屬性'addEventListener'null null

Uncaught TypeError: Cannot read property 'addEventListener' of null at 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> 
+0

使用'''document.getElementById('rico')'''和不帶井號的document.getElementById('ricobox') – trebor

回答

0

你得到的錯誤,因爲你的IDS實際上是ricobox波多黎各沒有磅字符。

所以

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

應該工作。

你需要的,如果你正在使用jQuery例如$("#rico")是一樣document.getElementById('rico')

工作fiddle

+0

謝謝,null對象的錯誤消失了!但是,當我點擊rico div時,ricobox div不會像教程中那樣移動。我錯過了什麼,我只是新的學習javascript –

+0

@ W.Romijn你有一個錯字'var translate3dValue =「translate3d(」+ xPosition +「px,」+ yPosition +「px,0)」;'你已經寫** o **而不是** 0 ** – trebor

+0

我從來沒有注意到它!非常感謝你的人,它已經解決了! –

0
<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

使用#字符