Доступ к второму дочернему элементу динамически генерируемой кнопки

Question

Для личного проекта я создаю список кнопок на основе данных массива объектов. Кнопки состоят из двух частей: текст кнопки и подробный абзац под текстом кнопки. Мои функции уже успешно генерируют div, кнопку и абзац без проблем.

На данный момент стиль отображения абзаца по умолчанию скрыт. Я хочу, чтобы он отображался в блоке.

Я получаю доступ к кнопке со следующим кодом:

function updateClicks() {
    var coll = document.querySelectorAll(".generatedDiv");
    var i = 0;

    for (i = 0; i < coll.length; i++) {
            coll[i].addEventListener("click", function() {
                var content = this.getElementsByTagName("p");
                if (content[0].firstChild.style.display === "block") {
                    content.style.display = "none";
                } else {
                    content.style.display = "block";
                }
            });
        }
}

Структура div выглядит следующим образом:

<button class="generatedDiv">
    <table>
        <td>Button text #1</td>
        <td>Button text #2</td>
    </table>
    <p>
        Additional Information
    </p>
</button>

С помощью этих функций я могу получить доступ к введенной «дополнительной информации», однако не могу редактировать стиль.

Answer 1

Итак, проблема здесь в том, что вы рассчитываете на this, чтобы он остался прежним, а это не так. Я часто репетирую как по FreeCodeCamp, так и по проекту Odin, и это общая дилемма. Вы не можете действительно полагаться на this, чтобы быть тем, кем, как вы думаете, должно быть. Как только вы попадаете во внутреннюю функцию (например, в функцию обработчика кликов), контекст меняется, и, таким образом, ваш this уже не тот.

Вместо этого рассмотрим другой вариант. То, что вы делаете здесь, обрабатывает событие, верно? Но ваша функция не является обработчиком событий, так как она не ожидает объект Event. Если вы немного переписываете свою функцию, то все начинает двигаться немного больше, чем вы ожидаете:

function updateClicks() {
  var coll = document.querySelectorAll(".generatedDiv");
  var i = 0;

  for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function(event) {
      var content = event.target.closest(".generatedDiv").querySelector("p");
      if (content.style.display !== "none") {
        content.style.display = "none";
      } else {
        content.style.display = "block";
      }
    });
  }
}


updateClicks()

<div class="generatedDiv">
  <h2>The first toggler</h2>
  <table>
    <td><button>Any click...</button></td>
    <td><button>...will toggle the p</button></td>
  </table>
<p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="generatedDiv">
  <h2>The second toggler</h2>
  <table>
    <td><button>but only...</button></td>
    <td><button>the p that is within this div</button></td>
  </table>


<p>Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>