I'm not sure if is this what i need but i think its neccesery. Propably i need add another condition to this line

const div = document.querySelector(`#result_${i}`);

I have simple .js file with array of object. Currently every object has question, answer. I would like to expand it by "text" where i would tell some details about results etc.

      //For Text
      const text = document.createElement("div");
      text.id = "text_"   i;
      text.style.display = "none";
      text.classList.add("pokus");
      text.innerHTML = ex.text;
      card.appendChild(text);

Logic is same as for answer. I can see it in the DOM but it's it's not showing for user. I think the reason is missing condition in querySelector? If yes. How can i add another? I tried (`#result_${i}, #text_$(i)`) or (`#result_${i}`, `#text_${i}`);

Whole code.

import("./Objects/"   selectedPage   ".js")
  .then((array) => {
    const { examples } = array;
    console.log(array);

    function toggle(i) {
      const div = document.querySelector(`#result_${i}`);

      if (div.style.display !== "none") {
        div.style.display = "none";
      } else {
        div.style.display = "block";
      }
    }

    const container = document.querySelector("#examples-container");

    examples.forEach((ex, i) => {
      const card = document.createElement("div");
      card.classList.add("card");

      const example = document.createElement("div");
      example.classList.add("example");
      example.innerHTML = ex.question;
      card.appendChild(example);

      //For Button
      const button = document.createElement("button");
      button.classList.add("toggle");
      button.innerHTML = "výsledek";
      button.addEventListener("click", () => toggle(i));
      card.appendChild(button);


      //For answer
      const result = document.createElement("div");
      result.id = "result_"   i;
      result.style.display = "none";
      result.classList.add("result");
      result.innerHTML = ex.answer;
      card.appendChild(result);

      //For Text
      const text = document.createElement("div");
      text.id = "text_"   i;
      text.style.display = "none";
      text.classList.add("pokus");
      text.innerHTML = ex.text;
      card.appendChild(text);

      // Add the card to the container
      container.appendChild(card);
    });
  })
  .catch((err) => {
    console.log(err);
  });

CodePudding user response：

Im not 100% sure I understand your question, but right now you're using QuerySelector and it will only return the first element. If you want to select multiple elements use QuerySelectorAll / getElementByClassName and then loop over the list they return.

CodePudding user response：

Use querySelectorAll

As you want to target more than 1 node (here result, text) you need to use querySelectorAll instead of querySelector

function toggle(i) {
  const divs = document.querySelector(`#result_${i}`,`#text_${i}`);

  for (let div of divs) {
    if (div.style.display !== "none") {
      div.style.display = "none";
    } else {
      div.style.display = "block";
    }
  }
}