JS для -loop всегда использует последний элемент - проблемы с областью действия - PullRequest
Новая
       23

JS для -loop всегда использует последний элемент - проблемы с областью действия

0 голосов
/ 03 сентября 2018 
var url_array = ["ulr1", "ulr2", "ulr3", "ulr4", "ulr5"];

var img = document.createElement('img');

for (i = 0; i < url_array.length; i++){
    var div = document.createElement('div');
    div.setAttribute("id", "div"+i);
    document.getElementById('main').appendChild(div);

    document.getElementById('div'+i).style.width = ImageWidth+5+"px";
    document.getElementById('div'+i).style.height = ImageHeight+5+"px";

    console.log("\ncreate all the DIVs. \nFor loop count: "+i);

    img.src = loadImage(url_array[i], ImageWidth, ImageHeight);

    try{throw img}
    catch(c_img) {

        document.getElementById('div'+i).appendChild(c_img);

        console.log("after load, and append, in Catch: "+img.src);
        console.log("div NR = "+document.getElementById('div'+i).id);
        console.log(document.getElementById('div'+i).childNodes.length);
    } //catch
} // FOR

function loadImage(URL, h, w)
{
    console.log("loadImage callaed with URL = "+URL);
    return url = URL+Date.now().toString(10);
}

For-Loop должен получить URL-адрес изображения (с камеры) и добавить его в DIV. DIV и IMG создаются на лету. Проблема в том, что только последний DIV стал держателем изображения.

Я использую catch-try для немедленного принудительного выполнения кода, чтобы каждый отдельный Div + i имел отличительный образ. Также такая конструкция (сразу вызывается выражение функции): 

(function(){
  something here;
  })();

на создание "частного" объема не дает никакой надежды. Либо «Позволить» - который должен определять переменную локально, не помогает. * Мои знания здесь ограничены, и я полагаюсь на данные, найденные на веб-сайте (могу дать ссылку позже, если это не противоречит правилам).

Вывод console.log () мало помогает. Все идет как надо, за исключением childNodes.length, который равен 1 для каждой итерации цикла for - это означает, что у каждого DIV есть IMG-потомок, я полагаю ... Если так - почему я их не вижу?

Я чувствую, что близок к тому, чего хочу достичь - используя Intervals (), обновляйте каждый DIV новым снимком камеры, но мне нужно решить эту текущую проблему.

Пример кода, готового к использованию: js.js: 

var url_array = [
"https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg",
"https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg",
"https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg"
];

var ImageWidth = 640;
var ImageHeight = 480;

var img = document.createElement('img');

for (i = 0; i < url_array.length; i++){

    var div = document.createElement('div');//.setAttribute("id", "div0");
    div.setAttribute("id", "div"+i);
    document.getElementById('main').appendChild(div);

    document.getElementById('div'+i).style.width = ImageWidth+5+"px";
    document.getElementById('div'+i).style.height = ImageHeight+5+"px";
    var color = ((Math.floor(Math.random() * (16777215)) + 1).toString(16)); // from 1 to (256^3) -> converted to HEX
    document.getElementById('div'+i).style.background = "#"+color;


    document.getElementById('div'+i).style.width = ImageWidth+5+"px";
    document.getElementById('div'+i).style.height = ImageHeight+5+"px";

    console.log("\ncreate all the DIVs. \nFor loop count: "+i);

    img.src = loadImage(url_array[i], ImageWidth, ImageHeight);

    try{throw img}
    catch(c_img) {

        document.getElementById('div'+i).appendChild(c_img);

        console.log("after load, and append, in Catch: "+img.src);
        console.log("div NR = "+document.getElementById('div'+i).id);
        console.log(document.getElementById('div'+i).childNodes.length);
    } // catch
} // FOR

function loadImage(URL, h, w)
{
    console.log("loadImage callaed with URL = "+URL);
    return url = URL+"?auto=compress&h="+h+"&w="+w;
}

HTML: 

<html>
<head>
<meta charset="utf-8">
<STYLE>

div#main {
    padding: 5px;
    background: black;
}
</STYLE>
</head>
<body>



<script type="text/javascript">

function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "js.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
<div id="main"></div>
</body>
</html>

1 Ответ

0 голосов
/ 03 сентября 2018

Проблема в том, что ваш 

var img = document.createElement('img');

- это вне цикла - вы создаете только один img. Когда appendChild вызывается для элемента, который уже существует в DOM (например, на второй, третьей, четвертой и т. Д. Итерации), элемент получает удаленный из своего предыдущего местоположения и вставляется в новое местоположение .

Вместо этого создайте изображение внутри цикла и постарайтесь не создавать неявно глобальные переменные - при объявлении новых переменных всегда используйте let или const.

Кроме того, когда вы делаете 

var div = document.createElement('div');

у вас есть ссылка на div, который вы только что создали - вам не нужно присваивать ему id, чтобы выбрать его с помощью 

document.getElementById('div'+i)

в нижних строках в той же области . Вместо этого просто продолжайте ссылаться на div: 

const ImageWidth = 200;
const ImageHeight = 200;
const main = document.getElementById('main');
var url_array = ["ulr1", "ulr2", "ulr3", "ulr4", "ulr5"];

for (let i = 0; i < url_array.length; i++){
  const img = document.createElement('img');
  const div = document.createElement('div');
  main.appendChild(div);
  div.style.width = ImageWidth+5+"px";
  div.style.height = ImageHeight+5+"px";
  img.src = loadImage(url_array[i], ImageWidth, ImageHeight);
  div.appendChild(img);
}
console.log(main.innerHTML);

function loadImage(URL, h, w) {
  return URL+Date.now().toString(10);
}
div#main {
    padding: 5px;
    background: black;
}
<div id="main">
</div>
...