html img cannot be appendChild()
Question
I have a simple javascript code which want to generate img randomly. My code is :
<html>
<head>
<style>
img{
position: absolute;
}
div{
position: absolute;
width: 500px;
height: 500px;
}
#rightSide { left: 500px;
border-left: 1px solid black;
}
</style>
<script>
var numberOfFaces = 5;
var theLeftSide = document.getElementById("leftSide");
function generateFaces(){
for (var i = 0; i < numberOfFaces; i++){
var img = document.createElement("img");
img.src = "smile.png";
var randomTop = Math.random() * 400;
var randomLeft = Math.random() * 400;
img.style.top = randomTop + "px";
img.style.left = randomLeft + "px";
document.getElementById("leftSide").appendChild(img);
}
}
window.onload = generateFaces();
</script>
</head>
<body>
<h1>Matching Game</h1>
<p>click on the extra smiling face on the left</p>
<div id = "leftSide">
</div>
<div id = "rightSide">
</div>
</body>
</html>
Error message is "Cannot read property 'appendChild' of null at generateFaces", but my image "smile.png" is in the same directory as html, so the path is correct, what is the problem? Thanks!
3 answers
solution1
0 2017-07-23 05:16:26
Change window.onload = generateFaces(); To
document.addEventListener("DOMContentLoaded", generateFaces);
<html> <head> <style> img { position: absolute; } div { position: absolute; width: 500px; height: 500px; } #rightSide { left: 500px; border-left: 1px solid black; } </style> <script> var numberOfFaces = 5; var theLeftSide = document.getElementById("leftSide"); function generateFaces() { for (var i = 0; i < numberOfFaces; i++) { var img = document.createElement("img"); img.src = "smile.png"; var randomTop = Math.random() * 400; var randomLeft = Math.random() * 400; img.style.top = randomTop + "px"; img.style.left = randomLeft + "px"; document.getElementById("leftSide").appendChild(img); } } document.addEventListener("DOMContentLoaded", generateFaces); </script> </head> <body> <h1>Matching Game</h1> <p>click on the extra smiling face on the left</p> <div id="leftSide"> </div> <div id="rightSide"> </div> </body> </html>
solution2
0 2017-07-23 06:37:02
You're attempting to set a handler by invoking the generateFaces function instead of referencing it; generateFaces() should be generateFaces .
Due to that error, document.getElementById("leftSide") is invoked prematurely and returns null because the element doesn't exist yet.
solution3
-1 2017-07-23 07:00:15
I found your code is working fine, i just wrote the script tag before the </body> tag and it works. here is the working code
<html> <head> <style> img { position: absolute; height: 100px; width: 100px; } div { position: absolute; width: 500px; height: 500px; } #rightSide { left: 500px; border-left: 1px solid black; } </style> </head> <body> <h1>Matching Game</h1> <p>click on the extra smiling face on the left</p> <div id="leftSide"> </div> <div id="rightSide"> </div> <script> var numberOfFaces = 5; var theLeftSide = document.getElementById("leftSide"); function generateFaces() { for (var i = 0; i < numberOfFaces; i++) { var img = document.createElement("img"); img.src = "https://vignette2.wikia.nocookie.net/39cluesidea/images/2/26/Smile.png/revision/latest?cb=20110217131619"; var randomTop = Math.random() * 400; var randomLeft = Math.random() * 400; img.style.top = randomTop + "px"; img.style.left = randomLeft + "px"; theLeftSide.appendChild(img); } } window.onload = generateFaces(); </script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.