如何使用javascript查找子页面元素

我正在开发一个web应用程序，希望在子页面中找到一个具有特定ID的按钮，可以使用导航栏访问该按钮。当我试图通过其ID在主页上查找按钮时没有问题，但是当我尝试这样做时，它找不到它，并且被设置为null

我正在使用VS2019并运行一个MVC ASP.NET解决方案

document.addEventListener("DOMContentLoaded", function () {
    const mainPageBtnEle = document.getElementById("main-btn"); // works
    const subPageBtnEle = document.getElementById("sub-btn"); // fails

按钮的html如下所示：

<button type="button" class="btn btn-primary" id="sub-btn">
   Button!
</button>

<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Admin" asp-action="Index">Admin</a>
                        </li>
                    </ul>
                </div>
            </div>
</nav>

按钮

导航栏的html如下所示：

<button type="button" class="btn btn-primary" id="sub-btn">
   Button!
</button>

<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Admin" asp-action="Index">Admin</a>
                        </li>
                    </ul>
                </div>
            </div>
</nav>

家


管理

请注意，我正在寻找的按钮是“Admin”页面的一部分，也是Index.cshtml视图的一部分

由于子页面Btnele获取空值，因此在单击它时无法触发任何函数

---

任何帮助都将不胜感激。

解决方案：通过移动

const subPageBtnEle=document.getElementById（“sub-btn”）

在

文档的外部。addEventListener（“DOMContentLoaded”，函数（）

由于这样做，现在功能按预期工作

---

感谢大家的帮助！

这个

“子btn”

是如何在页面上呈现的？什么是“子页面”？是在iframe中呈现的另一个页面？还是内联呈现的部分视图？“可以使用导航栏访问的子页面”…什么是“子页面”？你是指超链接中提到的另一个HTML页面？如果是，那么显然该页面尚未实际加载，只有指向该页面的链接。或者导航栏是否会将您带到当前文档中的锚定位置？请向我们显示导航栏的HTML，这样我们就可以清楚发生了什么。此外，请向我们显示您目标按钮的HTMLting，因此我们可以确定您使用了正确的方法来选择它。编辑回答这些评论的问题如果您解决了它，请将解决方案添加到“答案”中下面的部分，这是解决方案的方向-解决方案不是问题的一部分。然后人们可以投票，其他有类似问题的未来读者可以清楚地看到解决方案是什么。感谢添加解决方案。不过这似乎是一个奇怪的解决方案……通常您将代码放入DomContentLoaded中，以便它不会在el之前运行元素被创建。将其移到该块之外会增加这种风险。我希望解决方案是将该行代码移到Admin视图的Index.cshtml页面中，该按钮实际上存在于该页面中