如何在JS生成随机图片的代码中新增已生成图片数量展示功能

实现方案 #

你可以直接使用修改后的代码，核心逻辑为点击添加图片按钮时，同步更新顶部的图片总数展示：

<h1 id="number-of-p">图片数量：0</h1>
<input id="add-img-btn" type="button" value="添加图片" />
<div id="output-div"></div>

<script>
  var addImgBtn = document.getElementById("add-img-btn");
  var outputDiv = document.getElementById("output-div");
  var countText = document.getElementById("number-of-p");

  function addRandomImg() {
    // 生成1-100的随机数，循环次数从0到rnd，总图片数为rnd+1
    const rnd = Math.floor(Math.random() * 100 + 1);
    let html = [];
    for (let i = 0; i <= rnd; i++) {
      html.push('<img src="img/mann.jpg"/>');
    }
    outputDiv.innerHTML = html.join("");
    // 更新计数文本
    countText.innerText = `图片数量：${rnd + 1}`;
  }

  addImgBtn.onclick = addRandomImg;
</script>

核心修改说明 #

• 移除了原代码中逻辑错误、冗余的addRandomNumber函数和对应点击绑定
• 修复了原代码中将DOM元素变量错误覆盖为随机数的问题，保留了正确的元素引用
• 新增图片生成后的计数同步更新逻辑，直接修改顶部标题的文本内容展示总数

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