javascript - ループを使ってdivに複数のimgを挿入する方法

Question

こんにちは私はimgに異なるプロパティがあるたびにdivに何回もimgを挿入しようとしています。私のHTMLコードは、ID_DIVと呼ばれるサンプルIDを持つdivを持ちます。 このimg position absoluteのようなhtmlコードにスタイルセクションがあります。

私はdivに必要なimgの数に応じて変数NumberOfTimesをプリセットします。

しかし、私はループを動作させることができません。ブラウザをリフレッシュするたびにimgは別の位置に表示されますが、「NumberOfTImes」と表示されることはありません。 これに私のコードを編集しました。しかし、ループはとにかく動作しません。それが何であるかまだわからない。

function generateImg(){ 
    var numberOfTimes=prompt("how many times?"); 
    var div_id1=document.getElementById("div_id1"); 
    do{ 
    var oImg=document.createElement("img"); // Creates an oimg node 
    oImg.setAttribute('src', 's0me_s0urce'); // sets the source for img file 
    div_id1.appendChild(oImg); // append the img to #id Div.   
    document.querySelector('img').style.top = Math.floor(Math.random()*401)+'px'; 
    document.querySelector('img').style.left = Math.floor(Math.random()*401)+'px'; 
    numberOfTimes--; 
}while(numberOfTimes>0); 
} 

お願いします。私はこの論理の誤りがどこにあるのか分かりません。

Answer 1

"i"をループ外に宣言する必要があります。それ以外の場合はデクリメントされず、 "NumberOfTimes - 1"になります。したがって、ループは同じ場所の画像でループを繰り返します。これは、「NumberOfTimes」が同じスコープ内にあり、最初に使用されることを前提としています。私は "i"の位置を移動し、ループ内でそれに減分を加えたことに注意してください。

function RandomPositionImgs(){ 
var i=NumberOfTimes; 
    do{ 
    var oImg=document.createElement("img"); // Creates an oimg node 
    oImg.setAttribute('src', 'some_source'); // sets the source for img file 
    document.getElementById("ID_DIV").appendChild(oImg); // append the img to leftSide Div. 
    document.querySelector('img').style.top = Math.floor(Math.random()*401)+'px'; // random positioning 
    document.querySelector('img').style.left = Math.floor(Math.random()*401)+'px'; // random positioning 
    i--; 
}while(i>0); 
} 

Answer 2

私の答えは廃止されました。とにかく、ここでは重複した画像に対処する方法です：

var img, i, x, y; 
 
var size = 48, w = 5, h = 3; 
 
var grid = new Array(w * h).map(x => false); 
 
var n = 5; // n > grid.length => infinite loop 
 
var src = 'https://i.stack.imgur.com/6gwfY.gif?s=48&g=1'; 
 
var ct = document.getElementById('ct'); 
 

 
ct.style.width = size * w + 'px'; 
 
ct.style.height = size * h + 'px'; 
 

 
while (n-- > 0) { 
 
    i = next(), x = i % w, y = (i - x)/w; 
 
    img = document.createElement('img'); 
 
    img.setAttribute('src', src); 
 
    img.style.left = size * x + 'px'; 
 
    img.style.top = size * y + 'px'; 
 
    ct.appendChild(img); 
 
} 
 

 
function next() { 
 
    var l = grid.length; 
 
    var i = Math.floor(Math.random() * l); 
 
    // as long as this position is not free, try the next one 
 
    while (grid[i]) i = (i + 1) % l; 
 
    return grid[i] = true, i; 
 
}

img{position:absolute} 
 
#ct{background:#eee} 
 
#ct{position:relative}

<div id="ct"></div>

Answer 3

はあなたが私が私が間違って何をしていたか実感しましたあなたの答えありがとうございました。これは私があなたのコメントの後に行った正しいコードです。

function generateImgs(){ 
    var numberOfTimes=prompt("how many times?"); 
    for(i=0;i<numberOfFaces;i++){ 
    var oImg=document.createElement("img"); // Creates an oimg node 
    oImg.setAttribute('src', 'valid source'); // sets the source for img file 
    document.getElementById("div id").appendChild(oImg); // append the img to Div. 
    oImg.style.top = Math.floor(Math.random()*401)+'px'; 
    oImg.style.left = Math.floor(Math.random()*401)+'px'; 
} 
}