Question

我有编码问题。我创建图像的数组列表，并且具有在html上显示图像的功能。当我通过代码调用该函数时，得到“无法读取null的'appendChild'属性”，但是当我通过控制台调用它时，它可以正常工作。救命这是我的JS文件：

 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);

这是我的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

Javascript问题-可从控制台运行的功能，但不能在代码中使用

0 个答案: