我的JavaScript联系人切换代码为何按下左右键无响应？

我帮你梳理了代码里的几个关键问题，这些应该就是按键没反应的核心原因：

1. 键盘事件的键值匹配错误 #

这是最直接导致按键无响应的问题：你代码里判断的是event.key == "Left"和"Right"，但标准浏览器键盘事件中，左右箭头对应的键值是"ArrowLeft"和"ArrowRight"。浏览器根本识别不了"Left"这个值，所以你的条件判断永远不会触发。

2. showCurrentContact函数的调用逻辑混乱 #

• 你第一次调用showCurrentContact时，把setText("contactInfo", ...)的执行结果传了进去，但从逻辑来看，showCurrentContact应该是负责更新UI的函数，正确的做法是让它内部去调用setText，而不是把setText的结果当参数传递。
• 后面按键触发时你又无参调用showCurrentContact()，如果这个函数定义需要参数，这里会直接报错；如果不需要参数，那第一次的调用方式完全是多余的，还可能导致初始显示异常。

3. 潜在的语法小问题 #

contact3.birthday = "6/23/2001"这一行末尾缺少分号，虽然浏览器通常会自动补全，但可能引发意外的语法错误，建议补上。

4. 属性名大小写不一致（非按键问题，但影响后续功能） #

contact3用的是imageUrl（小写的Url），而contact1和contact2用的是imageURL（大写的URL），虽然这不影响按键切换，但如果后续要显示头像的话会找不到属性值，建议统一命名。

修正后的代码示例 #

var currentIndex = 0;

// 统一联系人属性名，修正语法
var contact1 = {
  name: "Fred",
  phone: "555-555-5555",
  birthday: "1/1/1970",
  imageURL: "https://images.code.org/53a5bdfb7f4ec83174756c8e094558fd-image-1449518131328.png"
};
var contact2 = {
  name: "Steve",
  phone: "609-889-4738",
  birthday: "3/15/1992",
  imageURL: "data:image/jpeg;base64,"
};
var contact3 = {
  name: "Sarah",
  phone: "304-812-4509",
  birthday: "6/23/2001",
  imageURL: "https://3.bp.blogspot.com/-jIOlaKwINSQ/Wni55"
};

var contacts = [];
appendItem(contacts, contact1);
appendItem(contacts, contact2);
appendItem(contacts, contact3);

// 定义showCurrentContact函数，专门负责更新联系人UI
function showCurrentContact() {
  var currentContact = contacts[currentIndex];
  // 使用模板字符串让内容更易读
  setText("contactInfo", `Name: ${currentContact.name}\nPhone: ${currentContact.phone}\nBirthday: ${currentContact.birthday}`);
}

// 初始加载时显示第一个联系人
showCurrentContact();

onEvent("viewContactsScreen", "keydown", function(event) {
  // 使用正确的箭头键值
  if(event.key === "ArrowLeft"){
    currentIndex--;
    currentIndex = wrap(currentIndex, 0, contacts.length - 1);
    showCurrentContact();
  } else if (event.key === "ArrowRight"){
    currentIndex++;
    currentIndex = wrap(currentIndex, 0, contacts.length - 1);
    showCurrentContact();
  }
});

// 确保wrap函数正确实现索引循环（如果环境没提供的话）
function wrap(index, min, max) {
  if (index < min) return max;
  if (index > max) return min;
  return index;
}

另外还要确认appendItem、onEvent、setText这些函数是你使用的开发环境（比如Code.org App Lab）提供的内置函数，确保它们能正常工作。

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