Question

我已经尝试了多种方法来解决此问题，但无法解决。

我的问题是我尝试通过

选择所有<img>

document.getElementsByTagName("img")

然后向其中添加.src=text[x]：

document.getElementsByTagName("img").src=text[x];

那行不通。我也尝试使用了这个：

var r = document.getElementsByTagName("img");
r.src=text[x];

再次，什么也没有。如果我使用此代码（immg是所有<img>拥有的ID）：

document.getElementById('immg').src=text[x];

它确实起作用，但仅在第一个对象上起作用，因为它仅在搜索ID为immg的元素，而不是所有元素。

我的完整代码：

第一个功能

function generateChar()
{
    var text = [
        "img/Water1.png",
        "img/Water2.png",
        "img/Water3.png",
        "img/Water4.png",
        "img/Water5.png",
        "img/Water6.png",
    ];
    var size = text.length;
    var x = Math.floor(size*Math.random());
    //document.getElementsByTagName("img").src=text[x];
    //document.getElementById('immg').src=text[x];
    var r = document.getElementsByTagName("img");

    r.src=text[x];
    //console.log(r);
}

其他有用的代码：

var nbDiv = 50;
for(var i = 0; i < nbDiv; i++){
    var div = document.createElement('div');
    var imgg = document.createElement('img');

    div.id = "d"+i ;
    imgg.id = "immg";
    imgg.className = "iimg";
    div.className = "movement timeSpan";
    document.querySelector('body').appendChild(div);
    div.appendChild(imgg);
}

和generateChar()在for（）下被调用

所以我想实现的目标是给所有img随机图片（在正常工作下，我只需要选择正确的项目即可。）

欢迎所有解决方案。

Answer 1

document.getElementsByTagName()返回一个HTMLCollection，这是一个可迭代的元素列表。

这是您应该做的：

let images = document.getElementsByTagName('img')

for (image of images) {
    x = Math.floor(Math.random() * text.length) // pick a random image URL
    image.src = text[x] // set the src to that URL
}

另外，我看到你在说：

immg是所有<img>拥有的ID

在多个元素上使用相同的ID是错误的。永远不要这样做！ ID应该是唯一的。这就是为什么如果使用getElementById只会返回找到的第一个元素，因为它假定您提供的ID对于该元素是唯一的。

您应该改为使用类，如下所示：

<img class='immg'>

Answer 2

尝试以下代码将随机/列表src添加到img标签：

    // Random
    var items = ["http://placehold.jp/9062aa/cccc00/150x100.png", "http://placehold.jp/3fb4e9/cccc00/150x100.png", "http://placehold.jp/6fc063/cccc00/150x100.png", "http://placehold.jp/d94949/cccc00/150x100.png", "http://placehold.jp/f8951e/cccc00/150x100.png","http://placehold.jp/7a564a/cccc00/150x100.png"];

    $(".random-img").each(function (index) {

        var img = items[Math.floor(Math.random() * items.length)];
        $(this).attr('src', img);

    });
    
    // Listed
        var items2 = ["http://placehold.jp/9062aa/cccc00/150x100.png", "http://placehold.jp/3fb4e9/cccc00/150x100.png", "http://placehold.jp/6fc063/cccc00/150x100.png", "http://placehold.jp/d94949/cccc00/150x100.png", "http://placehold.jp/f8951e/cccc00/150x100.png","http://placehold.jp/7a564a/cccc00/150x100.png"];

    $(".list-img").each(function (index) {

        var img2 = items2[index % items2.length];
        $(this).attr('src', img2);

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <h1>Random images from array</h1>
    <img class="random-img" />
    <img class="random-img" />
    <img class="random-img" />
    <img class="random-img" />
    <img class="random-img" />
    <img class="random-img" />
    
    
    <h1>Listed images from array</h1>
    <img class="list-img" />
    <img class="list-img" />
    <img class="list-img" />
    <img class="list-img" />
    <img class="list-img" />
    <img class="list-img" />

Answer 3

只需从数组中获取随机图像文本，然后在循环中使用它即可。

function getRandomImage(img) {
  var images = [
    "img/Water1.png",
    "img/Water2.png",
    "img/Water3.png",
    "img/Water4.png",
    "img/Water5.png",
    "img/Water6.png",
  ];
  var rand = images[Math.floor(Math.random() * images.length)];
  return rand
}

(function() {
  var nbDiv = 50;
  for (var i = 0; i < nbDiv; i++) {
    var div = document.createElement('div');
    var imgg = document.createElement('img');
    div.id = "d" + i;
    div.className = "movement timeSpan";
    imgg.id = "immg" + i;
    imgg.className = "iimg";
    randomImg = getRandomImage();
    imgg.src = randomImg;
    imgg.alt = randomImg;
    div.appendChild(imgg);
   // console.log(imgg);
    document.getElementsByTagName('body')[0].appendChild(div);
  }
}())

.iimg {
  border: 1px solid lime;
  width: 100px;
  height: 100px;
  display:block;
}

同一事物的jQuery版本

function getRandomImage(img) {
  var images = [
    "img/Water1.png",
    "img/Water2.png",
    "img/Water3.png",
    "img/Water4.png",
    "img/Water5.png",
    "img/Water6.png",
  ];
  var rand = images[Math.floor(Math.random() * images.length)];
  return rand
}

(function() {
  var nbDiv = 50;
  for (var i = 0; i < nbDiv; i++) {
    randomImg = getRandomImage();
    var div = $('<div/>')
      .addClass("movement timeSpan")
      .attr('id', "d" + i);
    var imgg = $('<img/>').addClass("iimg")
      .attr('id', "immg" + i)
      .attr('alt', randomImg)
      .attr('src', randomImg);
    imgg.appendTo(div);
    $('body').append(div);
  }
}())

.iimg {
  border: 1px solid lime;
  width: 100px;
  height: 100px;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

选择所有img标签并给它们一个src

3 个答案: