使用for循环实现点击按钮在HTML中展示数组元素失败该如何解决

问题原因 #

• for循环语法错误：循环条件的分隔符应该用分号(;)，你当前使用的逗号会直接触发语法报错，代码直接停止运行
• 事件绑定逻辑错误：你在循环中反复给同一个按钮覆盖绑定onclick事件，最终只有最后一次绑定的事件会生效，且循环结束后i的值等于数组长度，访问activitiesArray[i]会得到undefined，自然没有内容渲染
• 需求匹配错误：你要实现的是每次点击切换展示数组下一个元素，不需要用循环绑定事件，只需要维护一个当前展示的索引计数器即可

修复后代码 #

const activityButton = document.getElementById("activityButton");
const activityBox = document.getElementById("activitiesBox");
// 此处为示例数组，你可以替换成自己的实际数组定义
const activitiesArray = [
  {activity: "户外跑步", energy: 5, money: 0},
  {activity: "影院看片", energy: 2, money: 35},
  {activity: "超市采购", energy: 3, money: 120}
];
// 定义当前展示的索引，初始为0
let currentIndex = 0;

// 只需要给按钮绑定一次点击事件即可
activityButton.onclick = function() {
  const currentActivity = activitiesArray[currentIndex];
  activityBox.innerHTML = `
    <p>ACTIVITY: ${currentActivity.activity}</p>
    <p>ENERGY NEEDED: ${currentActivity.energy}</p>
    <p>MONEY NEEDED: ${currentActivity.money}</p>
  `;
  // 索引自增，超出数组长度就回到0，实现循环切换效果
  currentIndex = (currentIndex + 1) % activitiesArray.length;
}

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