如何在Fetch请求中正确使用设置图片显示数量的第二个输入框

你的代码已经正确请求了指定数量的图片数据，但只渲染了返回结果的第一项，所以不管limit设置多少都只显示一张图。下面是修复后的完整代码，以及关键修改点说明：

修复后的HTML（无需改动） #

<input placeholder="page number" class="number">
<input placeholder="limit" class="limit">
<button class="button">SUBMIT</button>
<div class="output"></div>

修复后的JS #

function loadPage() {
  let num = document.querySelector('.number')
  let lim = document.querySelector('.limit')
  let btn = document.querySelector('.button')
  let out = document.querySelector('.output')

  function request() {
    // 把输入值转为数字，避免字符串比较的问题
    const pageNum = Number(num.value)
    const pageLimit = Number(lim.value)
    
    // 严格符合1-10的取值范围判断
    if((pageNum >=1 && pageNum <=10) && (pageLimit >=1 && pageLimit <=10)) {
      fetch(`https://picsum.photos/v2/list?page=${pageNum}&limit=${pageLimit}`)
      .then(response => response.json())
      .then(data => {
        // 遍历所有图片数据，生成对应的HTML元素
        const imagesHtml = data.map(item => `
          <div style="margin: 10px; display: inline-block;">
            <img src="${item.download_url}" width="200px" height="200px" alt="作者：${item.author}">
            <div>作者：${item.author}</div>
          </div>
        `).join('')
        out.innerHTML = imagesHtml
      })
    } else {
      out.innerHTML = '输入值超出范围，请输入1-10之间的数字'
    }
  }

  btn.addEventListener('click', request)
}

// 页面加载完成后绑定事件，避免重复绑定
document.addEventListener('DOMContentLoaded', loadPage)

关键修改点 #

• 修正事件绑定逻辑：原来的document.addEventListener('click', loadPage)会导致每次点击页面都重复绑定按钮事件，改成DOMContentLoaded确保页面加载完成后仅执行一次绑定。
• 输入值类型转换：将输入框的字符串值转为数字，避免字符串与数字比较时的潜在错误（比如"10" > 10会返回false）。
• 批量渲染图片：使用data.map()遍历所有返回的图片数据，为每个数据项生成对应的图片和作者信息HTML，最后拼接成完整字符串插入到页面中。
• 优化范围判断：把原来的<10改成<=10，严格匹配题目要求的1-10取值范围。

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