为缩略图分配 .src 的问题

Question

我是 Javascript 的初学者，因此请记住这一点，以防我的代码中出现任何小的低效率。

我正在尝试将一组 div“gallerybox”（位于另一个 div 中，“galleryimages”）的 ID 设置为递增增量，即。图片1、图片2等

每个 div 内部（来自“galleryboxes”）各有一张图片；在我的 for 循环的第二行中，我试图对上面的 div 做同样的事情并给他们一个 id。然后我想用这张图片制作缩略图（发布到 div 'gallery'）。

var galleryimages = document.getElementById("galleryimages");
var galleryboxes = galleryimages.getElementsByTagName("div");

var k = 1;
var thumbimage = document.createElement("img");

for (var i = 0; i < galleryboxes.length; i++) {
    galleryboxes[i].id = "item" + k;
    galleryboxes[i].getElementsByTagName("img").id = "picture" + k;
    thumbimage.src = document.getElementById("picture" + k).src;
    document.getElementById("gallery").appendChild(thumbimage);
    //thumbimage.className = "thumbnail";
    k++;
}

不幸的是，当我 'appendChild' 时，它只是说它无法读取 null 的 .src 属性。我试过重新安排一些东西，但我不能只用图像来制作缩略图。我很确定我已将 ID 分配给了正确的项目...

除此之外，我注释掉的代码正在尝试为新缩略图分配一个类，这几次我接近让它工作似乎并没有工作本身。有什么明显的问题吗？

Answer 1

我注意到两个问题：

1) 您只创建了 1 个缩略图，但会遍历一组画廊框

2) getElementsByTagName 返回一个元素列表 (NodeList)，你设置 NodeList 的 .id。如果您确定恰好有 1 个 img，请使用 getElementsByTagName()[0]。