如何通过prompt获取用户后从JSON中提取对应背景图片？

你可以用数组的find()方法快速定位到对应用户名的对象，这是最简便的实现方式，直接看修改后的代码：

// 直接用JS数组对象更简洁，不用字符串转JSON（如果是后端返回的JSON字符串，再用JSON.parse()解析即可）
const characters = [
  { "name":"T" , "image":"WallP.jpg" },
  { "name":"A" , "image":"WallP2.jpg" },
  { "name":"G" , "image":"WallP3.jpg" }
];

const btn = document.getElementById("btn");
const slider = document.getElementById('slider');

btn.addEventListener("click", function() {
  const userName = prompt("Enter your name:", "T");
  // 用find方法匹配输入的用户名
  const matchedChar = characters.find(item => item.name === userName);
  
  if (matchedChar) {
    slider.src = matchedChar.image;
  } else {
    alert("找不到对应用户的背景图哦");
  }
});

关键说明： #

• find()方法会遍历数组，返回第一个符合item.name === userName条件的对象，找不到匹配项时返回undefined
• 增加判断逻辑是为了避免用户输入错误名字时出现报错
• 把原来的JSON字符串改成直接的JS数组对象更直观，新手更容易维护；如果你的JSON数据是从外部接口获取的，再保留JSON.parse()解析步骤即可

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