Javascript Java脚本| HTML5图片标签中的随机图像

尝试用HTML5图片标签制作随机图像（我有一组图像，都遵循模式“imgN”，其中“N”是1到9之间的数字）。到现在还不行。这就是我正在尝试的：

HTML代码是：

<picture id="heroimg">
    <source class="rand_webp_srcset" srcset="img1.webp" type="image/webp">
    <source class="rand_jpeg_srcset" srcset="img1.jpg" type="image/jpeg">
    <img class="rand_jpeg_src" src="img1.jpg">
</picture>

有什么线索吗？ 谢谢

编辑：我就是这样得到它的：

var randomNum = Math.floor(Math.random() * 9) + 1

var img = document.getElementById("rand_webp_srcset")
img.srcset='img/universo' + randomNum + '.webp'

var img = document.getElementById("rand_jpeg_srcset")
img.srcset='img/universo' + randomNum + '.jpg'

var img = document.getElementById("rand_jpeg_src")
img.srcset='img/universo' + randomNum + '.jpg'

---

使用函数

document.getElementsByClassName（）

时，将返回一个数组。只需添加要修改的项的索引，即

document.getElementsByClassName（'rand\u webp\u srcset'）[0]

。但是，在这种情况下，使用id会更好-请参阅

var randomNum=Math.floor（Math.random（）*9）+1 document.getElementsByClassName（'rand_webp_srcset'）[0].srcset='img'+randomNum+'.jpg'； document.getElementsByClassName（'rand_jpeg_srcset'）[0].srcset='img'+randomNum+'.jpg'； document.getElementsByClassName（'rand_jpeg_src'）[0].src='img'+randomNum+'.jpg'

getElementsByClassName

返回一个没有src或srcset属性的HTMLCollection。您需要在集合上循环，或者通过索引访问集合中的特定元素。您应该尝试调试JS代码。例如，使用

console.log（）

。在您的情况下：

console.log（document.getElementsByClassName（'rand\u webp\u srcset'））

将提供有关您做错了什么的更多信息。正如上面@CBroe所述，您将看到集合要迭代，而不是单个元素

var randomNum = Math.floor(Math.random() * 9) + 1

var img = document.getElementById("rand_webp_srcset")
img.srcset='img/universo' + randomNum + '.webp'

var img = document.getElementById("rand_jpeg_srcset")
img.srcset='img/universo' + randomNum + '.jpg'

var img = document.getElementById("rand_jpeg_src")
img.srcset='img/universo' + randomNum + '.jpg'