使用Javascript . innerhtml()无法正确显示从Json文件中获取的数据

Question

我正在使用Css Grid和香草JS进行时间跟踪仪表板项目，该项目具有不同的活动卡，显示当前和前一周的时间，从json文件和事件侦听器中提取，但我正在与JS逻辑作斗争。我能够使用async await获取和循环json数据，并能够在控制台中记录数据，因此调用肯定是有效的，但我无法使用. innerhtml()在活动卡中正确显示数据。

使用innerhHTML和事件监听器显示正确数据的控制台图像

问题是，即使在控制台中显示了数据，我也无法在卡片中显示该信息。我使用forEach循环遍历Json文件中的每个统计数据，并尝试通过为卡片部分添加另一个循环进行实验，但这只会导致相同的统计数据在每张卡片上被复制。这是一个相当简单的，但我有点卡住了。

我也认识到我的代码可以更DRY，任何指针减少重复的每个时间持续时间

statBtn.addEventListener("click", (e) => {
const activities = document.querySelectorAll(".previous-activity");
console.log(activities);
const id = e.target.id;
console.log(id);

if (id === "daily") {
btnStyles("daily");
getData().then((stats) =>
activities.forEach((activity) => {
console.log(activity)
return activity.innerHTML = `
<p class='curr-hrs'> ${stat.timeframes.daily.current} hrs</p>
<p class='previous-hrs'>Last Week - ${stat.timeframes.daily.previous} hrs</p>`;
});
})
);
} else if (id === "weekly") {
btnStyles("weekly");
getData().then((stats) =>
activities.forEach((activity) => {
console.log(activity)
return activity.innerHTML = `
<p class='curr-hrs'> ${stat.timeframes.weekly.current} hrs</p>
<p class='previous-hrs'>Last Week - ${stat.timeframes.weekly.previous} hrs</p>`;

});
})
);
} else if (id === "monthly") {
btnStyles("monthly");
getData().then((stats) =>
stats.map((stat) => {
console.log(`${stat.timeframes.monthly.previous} hours`);
//   console.log(activity);
return activities.innerHTML = `
<p class='curr-hrs'> ${stat.timeframes.monthly.current} hrs</p>
<p class='previous-hrs'>Last Week - ${stat.timeframes.monthly.previous} hrs</p>`;
console.log(activities.innerHTML);
);
}
})
);

任何帮助将不胜感激!谢谢,埃文

Answer 1

1. 活动"大于1个元素。innerHTML应该针对1个元素(https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML)

清理:a.创建按钮样式添加切换盒b.你对数据的请求似乎是相同的，所以你可能想要为

创建一个单独的函数额外:请注意在第二和第三条返回语句中有打字错误(活动而不是活动)