menu

Questions & Answers

each div generates a different content on other html file

I´m doing my graduation work where Ihave an svg Image of human body with many muscles in it and teacher told me that instead of creating many HTML files for each muscle with exercises on it, I should do a code where it generates specific exercises based on a muscle I cliked on. I created this code but it seems to ignor the fact that I clicked on one muscle and writes all the exercises.

index.html:

    <div id="trigger1" class="muscle">Rameno</div>
    <div id="trigger2" class="muscle">Biceps</div>
    <script src="main.js"></script>

workout.html:

    <div class="exercise" data-muscle="trigger1">
        <h2>Exercise for shoulder 1</h2>
    </div>
    <div class="exercise" data-muscle="trigger1">
        <h2>Exercise for shoulder 2</h2>
    </div>
    <div class="exercise" data-muscle="trigger2">
        <h2>Exercise for biceps 1</h2>
    </div>
    <div class="exercise" data-muscle="trigger2">
        <h2>Exercise for biceps 2</h2>
    </div>
    <script src="main.js"></script>

main.js:

for (let i = 1; i <= 2; i++) {
    const muscle = document.querySelector('#trigger' + i);
    muscle.addEventListener('click', saveSelectedMuscle);
}

function saveSelectedMuscle(event) {
    const muscle = event.target;
    const muscleId = muscle.id;
    localStorage.setItem("selectedMuscle", muscleId);
    window.location.href = "workout.html";
}
let muscleId = localStorage.getItem("selectedMuscle");
const exercises = document.querySelectorAll('.exercise');
exercises.forEach(exercise => {
    exercise.style.display = 'none';
    if (exercise.getAttribute('data-muscle') === muscleId) {
        exercise.style.display = 'block';
    }
});

Answers(1) :

Might be a couple of reasons for this - if you're using plain html files, and are opening them directly (i.e. not from a server of any kind, but with the file:// protocol), localStorage might not work as you expect it to (every page would be treated as if it's from a different domain, and the local storage would not be shared).

If you're doing this with a server, it might be a timing issue - since all of your code is inside main.js.

Remove this:

let muscleId = localStorage.getItem("selectedMuscle");
const exercises = document.querySelectorAll('.exercise');
exercises.forEach(exercise => {
    exercise.style.display = 'none';
    if (exercise.getAttribute('data-muscle') === muscleId) {
        exercise.style.display = 'block';
    }
});

from your main.js file, and place it inside workout.html, like this:

    <div class="exercise" data-muscle="trigger1">
        <h2>Exercise for shoulder 1</h2>
    </div>
    <div class="exercise" data-muscle="trigger1">
        <h2>Exercise for shoulder 2</h2>
    </div>
    <div class="exercise" data-muscle="trigger2">
        <h2>Exercise for biceps 1</h2>
    </div>
    <div class="exercise" data-muscle="trigger2">
        <h2>Exercise for biceps 2</h2>
    </div>
    <script src="main.js"></script>
    <script>
        let muscleId = localStorage.getItem("selectedMuscle");
        const exercises = document.querySelectorAll('.exercise');
        exercises.forEach(exercise => {
            exercise.style.display = 'none';
            if (exercise.getAttribute('data-muscle') === muscleId) {
                exercise.style.display = 'block';
            }
        });
    </script>

You can even avoid using main.js in workout.html since what's left in it has no influence over the contents of workout.html (unless your real case and code are quite different from what can be seen in your question).