点击上一页/下一页/随机按钮时图片元素不更新的问题排查

点击上一页（previous）、下一页（next）或随机（random）按钮时，所有div的内容都会对应更新，但图片元素始终保持不变，需要修改代码使其显示对应数组项的正确图片，其他功能均正常。

你的showPerson函数参数名和全局声明的图片元素变量person重名了：

• 全局变量person是获取到的#person-img图片元素
• 函数参数person传入的是索引数字（比如0、1、2）
• 函数里执行person.src = item.img时，实际是给数字类型的参数person添加src属性，完全没有作用到真实的图片元素上，所以图片不会更新。

修改showPerson函数的参数名，避免和全局变量冲突，比如改成index，然后正常使用全局的person变量设置图片地址。

// local reviews data
const reviews = [
  {
    id: 1,
    name: "susan smith",
    job: "web developer",
    img:
      "https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883334/person-1_rfzshl.jpg",
    text:
      "I'm baby meggings twee health goth +1. Bicycle rights tumeric chartreuse before they sold out chambray pop-up. Shaman humblebrag pickled coloring book salvia hoodie, cold-pressed four dollar toast everyday carry",
  },
  {
    id: 2,
    name: "anna johnson",
    job: "web designer",
    img:
      "https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883409/person-2_np9x5l.jpg",
    text:
      "Helvetica artisan kinfolk thundercats lumbersexual blue bottle. Disrupt glossier gastropub deep v vice franzen hell of brooklyn twee enamel pin fashion axe.photo booth jean shorts artisan narwhal.",
  },
  {
    id: 3,
    name: "peter jones",
    job: "intern",
    img:
      "https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883417/person-3_ipa0mj.jpg",
    text:
      "Sriracha literally flexitarian irony, vape marfa unicorn. Glossier tattooed 8-bit, fixie waistcoat offal activated charcoal slow-carb marfa hell of pabst raclette post-ironic jianbing swag.",
  },
  {
    id: 4,
    name: "bill anderson",
    job: "the boss",
    img:
      "https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883423/person-4_t9nxjt.jpg",
    text:
      "Edison bulb put a bird on it humblebrag, marfa pok pok heirloom fashion axe cray stumptown venmo actually seitan. VHS farm-to-table schlitz, edison bulb pop-up 3 wolf moon tote bag street art shabby chic. ",
  },
];

const person = document.querySelector("#person-img");
const author = document.querySelector("#author");
const job = document.querySelector("#job");
const info = document.querySelector("#info");

const prevBtn = document.querySelector(".prev-btn");
const nextBtn = document.querySelector(".next-btn");
const randomBtn = document.querySelector(".randomBtn");

let number = 0;

window.addEventListener('DOMContentLoaded', function() {
  const item = reviews[number]
  person.src = item.img;
  author.innerHTML = item.name;
  job.innerHTML = item.job;
  info.innerHTML = item.text;
})

// 修改参数名为index，避免和全局person变量冲突
function showPerson(index) {
  const item = reviews[index]
  person.src = item.img;
  author.innerHTML = item.name;
  job.innerHTML = item.job;
  info.innerHTML = item.text;
}

// show next person
nextBtn.addEventListener("click", function() {
  number++
  if(number > reviews.length - 1) {
    number = 0
  }
  showPerson(number)
})

prevBtn.addEventListener("click", function() {
  number--
  if(number < 0) {
    number = reviews.length - 1;
  }
  showPerson(number)
})

randomBtn.addEventListener("click", function() {
  number = Math.floor(Math.random() * reviews.length)
  showPerson(number)
})

• 原HTML和CSS代码无需修改，保持原样即可
• 修改后点击按钮时，图片会和其他内容一起同步更新到对应数组项的内容

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