Here is the html container:

      <div >
        <div >
          <p >Text 1
          </p>
        </div>
        <div >
          <div >
          </div>
        </div>
      </div>

      <div >
        <div >
          <p >Text 2
          </p>
        </div>
        <div >
          <div >
          </div>
        </div>
      </div>

      <div >
        <div >
          <p >Text 3
          </p>
        </div>
        <div >
          <div >
          </div>
        </div>
      </div>

      <div >
        <div >
          <p > Text 4
          </p>
        </div>
        <div >
          <div >
          </div>
        </div>
      </div>

      <div >
        <div >
          <p > Text 5
          </p>
        </div>
        <div >
          <div >
          </div>
        </div>
      </div>

    </div>

The paragraphs should be "visible" when text-event class clicked. Text style class is "hidden" by default. I did that already with other div boxes and it worked. Is there a 'p' declaration missing in the loop function? There is not even a console feedback when I pass the textEvent variable to the console.

const textEvent = document.querySelectorAll('.text-event');

for (var j = 0; j < textEvent.length; j  ) (function (j) {
    textEvent[j].addEventListener('click', onclick);

    textEvent[j].onclick = function (ctrls) {
        ctrls.forEach(ctrl => {
            /* ctrl.getElementsByClassName('p')[0].innerHTML; */
            ctrl.document.getElementsByClassName('text-style-11').style.visibility = "visible";
        })
    }

})(j); 

CodePudding user response：

I could not understand very well your code but this is how I would do it.

1. First get all the element with class "text-event"
2. loop over that array and add an event listener to each of them.
3. When you click in one of them select the element with the class of text-style-11
4. To something to that element.

const textContainers = document.querySelectorAll(".text-event");

textContainers.forEach((element) => {
    element.addEventListener("click", () => {
        const textElement = element.querySelector(".text-style-11");
        textElement.style.visibility = "hidden";
    });
});

Instead of adding styles directly, I recommend you to create a class and use classList toggle to add and remove that class.

    textContainers.forEach((element) => {
    element.addEventListener("click", () => {
        const textElement = element.querySelector(".text-style-11");
        textElement.classList.toggle("show");
    });
});

CodePudding user response：

You've already got a valid answer.. by the way here's the live snippet using the proper strategy to add an event listener to all your .text-event elements that will hide the inner paragraph embedded in the clicked box:

document.querySelectorAll('.text-event').forEach((el) => {
  el.addEventListener('click', (event) => {
    const clickedElement = event.currentTarget;    
    const innerParagraph = clickedElement.querySelector('.text-style-11');    
    innerParagraph.style.visibility = 'visible';
  });
});

.text-event {
  border: dotted gray 3px;
  margin-bottom: 2px;
  cursor: pointer;
}

.text-style-11{
  visibility: hidden;
}

<div >
  <div >
    <p >Alle Personen, die nicht sozialversicherungspflichtig beschäftigt sind (Beamte, Selbstständige, etc.)
    </p>
  </div>
  <div >
    <div >
    </div>
  </div>
</div>

<div >
  <div >
    <p >Einmalige Wartezeit 1 Monate
    </p>
  </div>
  <div >
    <div >
    </div>
  </div>
</div>

<div >
  <div >
    <p >Keine Karenzzeit
    </p>
  </div>
  <div >
    <div >
    </div>
  </div>
</div>

<div >
  <div >
    <p >Versichert sind nur Erstdiagnosen während der Versicherungslaufzeit (Herzinfarkt, Schlaganfall, Krebs, Blindheit oder Taubheit)
    </p>
  </div>
  <div >
    <div >
    </div>
  </div>
</div>

<div >
  <div >
    <p >Übernahme des noch ausstehenden Restsaldos von bis zu 135.000 €
    </p>
  </div>
  <div >
    <div >
    </div>
  </div>
</div>

CodePudding user response：

I have tested this code it should work fine:

const textEvent = document.querySelectorAll('.text-event');
   
  for (var j = 0; j < textEvent.length; j  )  {
    
            textEvent[j].addEventListener('click', (el) => {
                const clickedElement = el.currentTarget;    
                const innerParagraph = clickedElement.querySelector('.text-style-11');    
                innerParagraph.style.visibility = 'visible';
            });
  }