javascript - 您可以动态创建一个IMG元素，并使用document.GetElementById(name);对其进行访问吗？

这是我的代码，问题在ldimg（）中；和img（）; ldimg（）;创建图像元素，然后img（）;得到它，但是我的alert（）调试测试说无法读取null的源。

function ldimg(src, name) {
    var imageObj = document.createElement('img');
    imageObj.onload = function() {
        context.drawImage(imageObj, window.innerWidth + 100, window.innerHeight + 1, 1, 1);
    };
    imageObj.src = src;
    imageObj.id = name;
}

function img(name, x, y, width, height) {
    var image = document.getElementById(name);
    alert(image.src);
}
ldimg('bot.png', 'bot');

function Loop() {
    setTimeout(function() {
        img('bot', 100, 100, 100, 100);
        Loop();
    }, 16);
}
Loop();
</script>
</html>

最佳答案

如果您不打算将其添加到DOM，则可以重组代码以从ldimg返回图像。

function ldimg(src, name) {
    var imageObj = document.createElement('img');
    imageObj.onload = function() {
        context.drawImage(imageObj, window.innerWidth + 100, window.innerHeight + 1, 1, 1);
    };
    imageObj.src = src;
    imageObj.id = name;
    return imageObj;
}

function img(image, x, y, width, height) {
    alert(image.src);
}
var theImg = ldimg('bot.png', 'bot');

function Loop() {
    setTimeout(function() {
        img(theImg, 100, 100, 100, 100);
        Loop();
    }, 16);
}
Loop();
</script>
</html>