如何用JavaScript实现点击按钮生成随机数量图片的功能

现有代码问题 #

• 点击事件绑定的addImg函数仅支持插入1张固定图片，不符合随机数量的需求
• 编写的addRandomImg函数逻辑错误，错误给按钮DOM对象赋值随机数，且未被事件绑定调用

修正后代码 #

HTML代码 #

<input id="add-img-btn" type="button" value="添加图片" />
<div id="output-div"></div>

JavaScript代码 #

var addImgBtn = document.getElementById("add-img-btn");
var outputDiv = document.getElementById("output-div");

function addRandomImgs() {
  // 生成1-100之间的随机图片数量，可自行修改区间参数调整范围
  const randomCount = Math.floor(Math.random() * 100 + 1);
  // 若需要保留之前已生成的图片，删除下方清空容器的代码行即可
  outputDiv.innerHTML = '';
  // 循环生成对应数量的图片插入容器
  for(let i = 0; i < randomCount; i++) {
    outputDiv.innerHTML += `<img src="img/mann.jpg" alt="示例图片${i+1}"/>`;
  }
}

// 绑定点击事件到正确的处理函数
addImgBtn.onclick = addRandomImgs;

实现说明 #

点击按钮后会先计算得到随机图片数量，再循环插入对应数量的图片到页面容器中，若你需要调整随机图片的数量范围，修改Math.random() * 100 + 1中的参数即可，比如要生成5-20之间的随机数，改为Math.random() * 16 + 5即可。

内容的提问来源于stack exchange，提问作者boons