I am relatively new to programming. I got my 'click' eventListener to work, and when you click on the first two li's in the ul, the class of the div toggles on and off. However, when you click on any li after the second one, it toggles the class of every other div and not the one that is clicked on? If you need more clarification regarding the situation, feel free to let me know.
For example, if the for loop were to print:
If i click on 'bench press' and 'deadlift' it will toggle .info and show the information for it; but if i were to click on 'squat' it will toggle .info for the 'curl' instead, so on and so forth...
Here is all the code,
<div>
{% for workout in workouts %}
<ul>
<li class="item">{{ workout.name }}</li>
{% autoescape false %}
<div class="info" id="info">
<p>{{ workout.description }}</p>
</div>
{% endautoescape %}
</ul>
{% endfor %}
</div>
let li = document.querySelectorAll("li");
let info = document.querySelectorAll(".info");
for (let i = 0; i < li.length; i++) {
li[i].addEventListener("click", function () {
info[i].classList.toggle("info");
});
}
.info {
display: none;
}
Your javascript code is fine.
Make sure your HTML is valid.
Each html tag has to be properly closed.
So ether <tag /> or <tag> </tag>, when the browser encounters what it deems incomplete, it will attempt to patch things up, that could cause your <li> and <div> pairs to misalign.
I saw you've edited your question, so it might not be relevant anymore.
note that you debug and inspect the actual html the browser has interpreted, rightclick-> inspect will open a view where you can see the state of the browser
let li = document.querySelectorAll("li");
let info = document.querySelectorAll(".info");
for (let i = 0; i < li.length; i++) {
li[i].addEventListener("click", function() {
info[i].classList.toggle("info");
});
}.info {
display: none;
}
.info-colour {
background: chocolate;
}
.item {
margin-top: 1rem;
background: orange;
}
p {
margin: 0
}<div>
<ul>
<li class="item"> workout.name 1</li>
<div class="info info-colour">
<p> workout.description 1 </p>
<div>
Necessary Workout Equpiment: [Specific Machinery]
</div>
</div>
<li class="item">workout.name 2</li>
<div class="info info-colour">
<p> workout.description 2 </p>
<div>
Necessary Workout Equpiment: [Specific Machinery]
</div>
</div>
<li class="item">workout.name 3</li>
<div class="info info-colour">
<p> workout.description 3 </p>
<div>
Necessary Workout Equpiment: [Specific Machinery]
</div>
</div>
</ul>
</div>The i variable stores the last value after the loop, since it is in another callback function.
Try this fix:
let li = document.querySelectorAll("li");
for (let i = 0; i < li.length; i++) {
let liItem = li[i];
liItem.addEventListener("click", function () {
liItem.querySelector("div").classList.toggle("info");
});
}