毕业项目前端问题：点击肌肉后显示全部训练内容而非对应内容

毕业项目开发中，点击人体SVG上的肌肉块跳转至workout.html后，页面会显示全部训练内容，而非对应肌肉的内容。

问题根源 #

你的main.js同时在index.html和workout.html中加载：

• 在workout.html里不存在#trigger1、#trigger2这些元素，执行for循环时document.querySelector返回null，调用addEventListener会抛出错误，直接中断后续代码执行。
• 训练内容的显示逻辑因代码中断未运行，所有.exercise元素保持默认显示状态，导致用户看到全部内容。

修复后的代码 #

main.js

document.addEventListener('DOMContentLoaded', function() {
  // 仅在存在肌肉触发元素的页面（index.html）添加点击事件
  for (let i = 1; i <= 2; i++) {
    const muscle = document.querySelector('#trigger' + i);
    if (muscle) { // 检查元素是否存在，避免报错
      muscle.addEventListener('click', saveSelectedMuscle);
    }
  }

  // 处理训练内容显示逻辑（仅在workout.html生效）
  const exercises = document.querySelectorAll('.exercise');
  if (exercises.length > 0) {
    let muscleId = localStorage.getItem("selectedMuscle");
    exercises.forEach(exercise => {
      exercise.style.display = 'none';
      if (exercise.getAttribute('data-muscle') === muscleId) {
        exercise.style.display = 'block';
      }
    });
    // 可选：无选中肌肉时隐藏所有内容
    if (!muscleId) {
      exercises.forEach(exercise => exercise.style.display = 'none');
    }
  }
});

function saveSelectedMuscle(event) {
  const muscle = event.target;
  const muscleId = muscle.id;
  localStorage.setItem("selectedMuscle", muscleId);
  window.location.href = "workout.html";
}

修复说明 #

1. 用DOMContentLoaded事件包裹所有逻辑，确保DOM元素完全加载后再执行代码，避免元素未找到的潜在问题。
2. 添加if (muscle)判断，仅在找到触发元素时绑定点击事件，防止在workout.html中报错中断代码。
3. 检查.exercise元素是否存在，仅在workout.html页面执行训练内容的显示逻辑。
4. 新增无选中肌肉时的处理逻辑，避免默认显示全部内容。

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