Javascript 访问动态生成的按钮的第二个子级

对于个人项目，我将根据对象数组的数据生成按钮列表。按钮包含两部分：按钮文本和按钮文本下方的详细段落。我的函数已经成功地生成了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";
                }
            });
        }
}

函数updateClicks（）{
var coll=document.querySelectorAll（“.generatedDiv”）；
var i=0；
对于（i=0；i

该部门的结构如下：

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

按钮文本#1
按钮文本#2

补充资料

---

我可以通过这些函数访问键入的“附加信息”，但我无法编辑样式。

因此，这里的问题是，您指望

此

保持不变，而事实并非如此。我经常辅导FreeCodeCamp和Odin项目，这是一个常见的难题。你不能真正依靠

这个
成为你认为它应该是的样子。一旦你在一个内部函数中（比如点击处理函数），那么上下文就改变了，因此你的
这个
就不一样了

请考虑另一种选择。你在这里做的是处理一件事，对吗？但是您的函数不是事件处理程序，因为它不需要
事件
对象。如果你稍微重写一下你的函数，那么事情就会开始像你期望的那样发展：


函数updateClicks（）{
var coll=document.querySelectorAll（“.generatedDiv”）；
var i=0；
对于（i=0；i


第一个开关
任何点击。。。
…将切换p
库拉比图尔·阿库埃拉特（Curabitur arcu erat）、阿库姆桑帝国（accumsan id Impertet）、港口码头（sem）。乌尔里西斯·利古拉是一位伟大的政治家。库拉比图尔·阿库埃拉特（Curabitur arcu erat）、阿库姆桑帝国（accumsan id Impertet）、港口码头（sem）。Lorem ipsum dolor sit amet，是一位杰出的献身者

第二个开关
但只有。。。
这个div中的p
大法官万岁，拉西尼亚·埃吉特被任命为法官，在特卢斯举行会议。前庭ac直径位于车辆部件的两侧。莫里斯·布兰迪是一位杰出的艺术家，他是一位杰出的艺术家。Lorem ipsum dolor sit amet，是一位杰出的献身者

谢谢，这很有效！我非常感谢您对
这篇
的深入了解！很乐意帮忙。这是一件很常见的事情，
这个
是动态变化的。若你们还并没有，我建议你们阅读关于作用域和闭包的部分。