Можете ли вы динамически создать элемент IMG и получить к нему доступ с помощью document.GetElementById (name); - PullRequest
Новая
       18

Можете ли вы динамически создать элемент IMG и получить к нему доступ с помощью document.GetElementById (name);

0 голосов
/ 06 июня 2018

Это мой код, проблема в 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>

Ответы [ 2 ]

0 голосов
/ 06 июня 2018

Вам необходимо добавить изображение в структуру DOM.Для этого вы можете использовать appendChild, как в примере ниже: 

function ldimg(src, name) {
    var imageObj = document.createElement('img');
    imageObj.src = src;
    imageObj.id = name;
    var imageDiv = document.getElementById("imgDiv");
    imageDiv.appendChild(imageObj);
}

function img(name, x, y, width, height) {
    var image = document.getElementById(name);
    alert(image.src);
}
ldimg('http://thecatapi.com/api/images/get?format=src&type=gif', 'bot');
<div id="imgDiv"></div>

Кроме того, setTimeout, который вы настроили, должен быть setInterval, так что вам не нужно вызывать функцию внутри себя.В следующем примере у меня есть setInterval с 10-секундным интервалом, чтобы сделать его немного менее раздражающим: 

function ldimg(src, name) {
    var imageObj = document.createElement('img');
    imageObj.src = src;
    imageObj.id = name;
    var imageDiv = document.getElementById("imgDiv");
    imageDiv.appendChild(imageObj);
}

function img(name, x, y, width, height) {
    var image = document.getElementById(name);
    alert(image.src);
}
ldimg('http://thecatapi.com/api/images/get?format=src&type=gif', 'bot');

function Loop() {
    setInterval(function() {
        img('bot', 100, 100, 100, 100);
    }, 10000);
}
Loop();
<div id="imgDiv"></div>
0 голосов
/ 06 июня 2018

Вы можете реструктурировать код так, чтобы он возвращал изображение из ldimg, если вы не собираетесь добавлять его в DOM. 

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