Don't understand why code till question 3 works fine but not working for question 4 and 5-CodePudding

I am trying to build a simple FAQ page using HTML, CSS and JavaScript but don't understand why the first three event listeners work while the rest are not working.

JavaScript:

document.getElementById("question1").querySelector("span").addEventListener("click", function () {
    document.querySelector(".answer1").classList.toggle("active-state");
});
document.getElementById("question2").querySelector("span").addEventListener("click", function () {
    document.querySelector(".answer2").classList.toggle("active-state");
})
document.getElementById("question3").querySelector("span").addEventListener("click", function () {
    document.querySelector(".answer3").classList.toggle("active-state");
})

document.getElementById("question4").querySelector("span").addEventListener("click", function () {
    document.querySelector(".answer4").classList.toggle("active-state");
})
document.getElementById("question5").querySelector("span").addEventListener("click", function () {
    document.querySelector(".answer5").classList.toggle("active-state");
})

HTML

<h1>FAQ</h1>
      <p id="question1">How many team members can I invite?<span><img src="./images/icon-arrow-down.svg" alt=""></span>
      </p>
      <p >You can invite up to 2 additional users on the Free plan. There is no limit
        on team members
        for the Premium plan.</p>
      <hr>
      <p id="question2"> What is the maximum file upload size?<span><img src="./images/icon-arrow-down.svg"
            alt=""></span></p>
      <p > No more than 2GB. All files in your account must fit your allotted storage
        space.</p>
      <hr>
      <p id="question3"> How do I reset my password?<span><img src="./images/icon-arrow-down.svg" alt=""></span></p>
      <p > Click “Forgot password” from the login page or “Change password” from your
        profile page.
        A reset link will be emailed to you.</p>
      <hr>
      <p id="question4"> Can I cancel my subscription?<span><img src="./images/icon-arrow-down.svg" alt=""></span></p>
      <p > Yes! Send us a message and we’ll process your request no questions asked.
      </p>
      <hr>
      <p id="question5"> Do you provide additional support?<span><img src="./images/icon-arrow-down.svg" alt=""></span>
      </p>
      <p > Chat and email support is available 24/7. Phone lines are open during
        normal business
        hours. </p>

document.getElementById("question1").querySelector("span").addEventListener("click", function() {
  document.querySelector(".answer1").classList.toggle("active-state");
});
document.getElementById("question2").querySelector("span").addEventListener("click", function() {
  document.querySelector(".answer2").classList.toggle("active-state");
})
document.getElementById("question3").querySelector("span").addEventListener("click", function() {
  document.querySelector(".answer3").classList.toggle("active-state");
})

document.getElementById("question4").querySelector("span").addEventListener("click", function() {
  document.querySelector(".answer4").classList.toggle("active-state");
})
document.getElementById("question5").querySelector("span").addEventListener("click", function() {
  document.querySelector(".answer5").classList.toggle("active-state");
})

.active-state {
  background: pink;
}

<h1>FAQ</h1>
<p id="question1">How many team members can I invite?<span><img src="./images/icon-arrow-down.svg" alt="1"></span>
</p>
<p >You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan.</p>
<hr>
<p id="question2"> What is the maximum file upload size?<span><img src="./images/icon-arrow-down.svg"
            alt="2"></span></p>
<p > No more than 2GB. All files in your account must fit your allotted storage space.
</p>
<hr>
<p id="question3"> How do I reset my password?<span><img src="./images/icon-arrow-down.svg" alt="3"></span></p>
<p > Click “Forgot password” from the login page or “Change password” from your profile page. A reset link will be emailed to you.</p>
<hr>
<p id="question4"> Can I cancel my subscription?<span><img src="./images/icon-arrow-down.svg" alt="4"></span></p>
<p > Yes! Send us a message and we’ll process your request no questions asked.
</p>
<hr>
<p id="question5"> Do you provide additional support?<span><img src="./images/icon-arrow-down.svg" alt="5"></span>
</p>
<p > Chat and email support is available 24/7. Phone lines are open during normal business hours. </p>

CodePudding user response：

While this does work as expected, and I know this isn't part of the question, but there is a better way to do this. I didn't want to let a teaching moment pass by. What if you have 100 or 200 questions... that's going to end up being a lot of JS based on your ID structure.

For your questions, change out your <p id="question..."> for <p >

Remove the answer1, answer2, answer3, etc. from your answer classes.

Then collect all the questions:

let questions = document.querySelectorAll(".question span");

Then collect all the answers:

let answers = document.querySelectorAll(".answer");

...and loop through them like this...

for (let i = 0; i < questions.length; i  ) {
  questions[i].addEventListener("click", function () {
    answers[i].classList.toggle("active-state");
  });
}

This basically says, "For each question span I click on, toggle the active-state class for each of the answers."

Then you can have as many questions as you would like and you don't have to worry about adding more JS.

View this snippet to see how it works:

let questions = document.querySelectorAll(".question span");
let answers = document.querySelectorAll(".answer");

for (let i = 0; i < questions.length; i  ) {
  questions[i].addEventListener("click", function () {
    answers[i].classList.toggle("active-state");
  });
}

.active-state {
  background: pink;
}

<h1>FAQ</h1>
<p >How many team members can I invite?
  <span><img src="./images/icon-arrow-down.svg" alt="1"></span>
</p>
<p >You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan.</p>
<hr>
<p > What is the maximum file upload size?<span><img src="./images/icon-arrow-down.svg"
            alt="2"></span></p>
<p > No more than 2GB. All files in your account must fit your allotted storage space.
</p>
<hr>
<p > How do I reset my password?<span><img src="./images/icon-arrow-down.svg" alt="3"></span></p>
<p > Click “Forgot password” from the login page or “Change password” from your profile page. A reset link will be emailed to you.</p>
<hr>
<p > Can I cancel my subscription?<span><img src="./images/icon-arrow-down.svg" alt="4"></span></p>
<p > Yes! Send us a message and we’ll process your request no questions asked.
</p>
<hr>
<p > Do you provide additional support?<span><img src="./images/icon-arrow-down.svg" alt="5"></span>
</p>
<p > Chat and email support is available 24/7. Phone lines are open during normal business hours. </p>