0

I have a coding problem. I create an Array List of images and I have a function to display the images on html. When I call the function through the code I get "Cannot read property 'appendChild' of null" but when I call it through the console it works fine. HELP this is my JS file:

 var imagesData = []

class Picture{
    constructor (src, name){
        this.id = imagesData.length;
        this.src = src;
        this.name = name;
    }
}

function createNewImage(src, name){
    var pic = new Picture(src, name);
    var i;
    imagesData.push(pic);
}

createNewImage('/img/roger.jpeg', 'Roger');


function addImage(i){
    var place = document.getElementById('body');
        console.log("ue");
    
    var imgs = document.createElement('img');
        console.log("ue");
    
    imgs.src = imagesData[i].src;
        console.log("ue");
    //img.src = imageConst.src
    
    place.appendChild(imgs);
    
}

addImage(0);

Here's my html:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="newil.js"> </script>
    <link rel="stylesheet" href="ilustration.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

</head>

<body id="body">
    <p id = "showing"></p>
    
    <!-- <button onclick="createImage()"> Click here </button> --->
    
    
    
    <div id="img"></div>

</body></html>

enter image description here

enter image description here

Lmao_ leoaf
  • 1

0 Answers0