这个 div 和图像创建 JavaScript 代码有什么问题？

Question

我对 JavaScript 知之甚少，但就像我所做的一切一样，我一头扎进了一些复杂的代码中（至少 我 认为它很复杂）。 该代码基本上设计为将尽可能多的（大约）300x200 图像放入一个称为“超级容器”的 div 中。 应该创建一个名为“容器”的 div，然后应该用图像填充它。 图像将稍微调整大小以使其更美观，并且还会计算 nr 行和列。 我不太关心计算图像（或框）的数量、大小或位置的逻辑是如何工作的，因为我认为这是合理的。 我更关心我的语法和 javascript 语言本身的使用，因为目前几乎没有显示任何内容。 'setupboxes' 函数在我的 'index.php' 中被调用，我很确定我不会弄错。

参见下面的 .js 代码：

function setupboxes() {
    var stdbw=300; //standard box width
    var stdbh=200; //standard box height
    var w=document.getElementById("containerparent").clientWidth; //get width of containerparent
    var h=document.getElementById("containerparent").clientHeight; //get height of containerparent
    var b=10; //set containerparent padding
    var p=b; //set box padding

if(w>999) {
        b=20; //set containerparent padding to 20px if screen width over 999px
        p=b; //set box padding to 20px if screen width over 999px 
 } 
    var nrcols=Math.round((w-2*b)/(stdbw+2*p)); //set integer for nr of columns
    var nrrows=Math.round((h-2*b)/(stdbh+2*p)); //set integer for nr of rows
    var nrboxes=nrcols*nrrows; //calculate nr of boxes
    var bh=(((h-2*b)/nrrows)-2*p); //set box height
    var bw=(((w-s*b)/nrcols)-2*p); //set box width
    var top=(h-(nrcols*(bh+2*p))); //set distance of container from top of containerparent
    var left=(w-(nrrows*(bw+2*p))); //set distance of container from left of containerparent
    var conth=((nrcols*(bh+2*p))+2*b); //set height of container
    var contw=((nrrows*(bw+2*p))+2*b); //set width of container
    var divcont=document.getElementById('containerparent').insertAdjacentHTML('afterbegin', '<div id="container"></div>');  //create container
    divcont.style.position = 'relative';
    divcont.style.top = top;
    divcont.style.left = left;
    divcont.style.border = 'red 1px solid';

    var nrboxesit=nrboxes;
    var boxnr=1;

    while(nrboxesit>0){ //create boxes
        document.getElementById('container').insertAdjacentHTML('beforeend', '<img src="images/0000001.jpg">');
        img.style.padding = p;
        img.style.height = bh;
        img.style.width = bw;
        boxnr=boxnr+1;
        nrboxesit=nrboxesit-1;  
    }
 }

就像我说我是 JavaScript 新手，所以请不要以为我会尝试一些简单的修复！

提前致谢。

Answer 1

为了显示图像，我做了最少的更改。具体来说，我不知道 's' 代表什么，所以我将其设置为 10。

divcont 在尝试插入 HTML 之前分配给元素。

接近末尾的img 未定义，我分配了一个 id 并将其用作参考。也许你不想像那样浪费地分配 id。

 function setupboxes() {
   var stdbw = 300; //standard box width
   var stdbh = 200; //standard box height
   var w = document.getElementById("containerparent").clientWidth; //get width of containerparent
   var h = document.getElementById("containerparent").clientHeight; //get height of containerparent
   var b = 10; //set containerparent padding
   var p = b; //set box padding

   // FIXME
   var s = 10;

   if (w > 999) {
     b = 20; //set containerparent padding to 20px if screen width over 999px
     p = b; //set box padding to 20px if screen width over 999px 
   }
   var nrcols = Math.round((w - 2 * b) / (stdbw + 2 * p)); //set integer for nr of columns
   var nrrows = Math.round((h - 2 * b) / (stdbh + 2 * p)); //set integer for nr of rows

   var nrboxes = nrcols * nrrows; //calculate nr of boxes
   var bh = (((h - 2 * b) / nrrows) - 2 * p); //set box height
   var bw = (((w - s * b) / nrcols) - 2 * p); //set box width
   var top = (h - (nrcols * (bh + 2 * p))); //set distance of container from top of containerparent
   var left = (w - (nrrows * (bw + 2 * p))); //set distance of container from left of containerparent
   var conth = ((nrcols * (bh + 2 * p)) + 2 * b); //set height of container
   var contw = ((nrrows * (bw + 2 * p)) + 2 * b); //set width of container

   // FIXME
   var divcont = document.getElementById('containerparent');
   divcont.insertAdjacentHTML('afterbegin', '<div id="container"></div>'); //create container

   divcont.style.position = 'relative';
   divcont.style.top = top;
   divcont.style.left = left;
   divcont.style.border = 'red 1px solid';

   var nrboxesit = nrboxes;
   var boxnr = 1;

   while (nrboxesit > 0) { //create boxes

     // USED PLACEHOLDER IMAGE HERE

     document.getElementById('container').insertAdjacentHTML('beforeend', '<img id="myBox' + nrboxesit + '" src="http://lorempixel.com/300/200/">');

     // FIXME img is undefined. I just added an id based on
     // current iteration of box number 
     var img = document.getElementById('myBox' + nrboxesit);
     img.style.padding = p;
     img.style.height = bh;
     img.style.width = bw;
     boxnr = boxnr + 1;
     nrboxesit = nrboxesit - 1;
   }
 }

 setupboxes();

    <div style="display: inline-block; width: 600px; height: 600px;" id="containerparent">
        <div style="display: inline-block; width: 600px; height: 600px;" id="container">
        </div>
    </div>