(Sorry for bad English)I have this error in my JS file(Asp.net Core project) and I cant find the problem and everything is ok Please Help.(I know that When this error happend 1.when the object is null in JS file 2.when the Refrenced JS script is before object in html I read this https://bobbyhadz.com/blog/javascript-cannot-set-property-onclick-of-null#:~:text=Conclusion%20%23-,The%20%22Cannot%20set%20property%20'onclick'%20of%20null%22%20error,property%20on%20valid%20DOM%20elements. but the error is still there).
By the way I use Component for sidebar in project.
My JS
,,,
const sidebar = document.querySelector(".sidebar");
const AccountMenubtn = document.querySelector(".AccountMenubtn");
const searchbtn = document.querySelector(".bx-search");
AccountMenubtn.onclick = function () {
sidebar.classList.toggle("active");
};
searchbtn.onclick = function () {
sidebar.classList.toggle("active");
};
,,,
My Html
,,,
@model MyLearn.Domain.Models.Account
<div class="sidebar">
<div class="logo_content">
<div class="logo">
<img src="/images/static/logo.svg" />
<div class="logo_name">MyLearn</div>
</div>
<i class="bx bx-menu AccountMenubtn"></i>
</div>
<ul class="nav_list">
<li>
<i class="bi bi-search bx-search"></i>
<input type="search" name="Search" placeholder="...??? ? ??">
<span class="tooltip">??? ? ??</span>
</li>
<li>
<a asp-action="Index" asp-controller="UserDashBoard">
<i class='bi bi-person'></i>
<span class="links_name">?????? ???? ??????</span>
</a>
<span class="tooltip">?????? ???? ??????</span>
</li>
<li>
<a asp-action="EditProfile" asp-controller="UserDashBoard">
<i class="bi bi-pen"></i>
<span class="links_name">?????? ???? ??????</span>
</a>
<span class="tooltip">?????? ???? ??????</span>
</li>
<li>
<a asp-action="ChangePassword" asp-controller="UserDashBoard">
<i class="bi bi-key"></i>
<span class="links_name">????? ??? ????</span>
</a>
<span class="tooltip">????? ??? ????</span>
</li>
<li>
<a asp-action="Wallet" asp-controller="UserDashBoard">
<i class="bi bi-wallet2"></i>
<span class="links_name">??? ??? ??</span>
</a>
<span class="tooltip">??? ??? ??</span>
</li>
<li>
<a asp-action="MyCourses" asp-controller="UserDashBoard">
<i class="bi bi-app"></i>
<span class="links_name">???? ??? ??</span>
</a>
<span class="tooltip">???? ??? ??</span>
</li>
<div class="profile_content">
<div class="profile">
<div class="profile_detail">
<img src="img/1.jpg" alt="profile">
<div class="name_job">
<div class="name">@Model.UserName</div>
<div class="job">@Model.Email</div>
</div>
</div>
<a asp-action="Logout" asp-controller="UserDashBoard">
<i class="bi bi-box-arrow-left" id="log_out"></i>
</a>
<span class="links_name"></span>
</div>
</div>
</ul>
,,,
And this is my layout page where I call the component before script Refrence and before these codes are my header
,,,
@if (User.Identity.IsAuthenticated)
{
@await Component.InvokeAsync("AccountMenuComponent")
}
</nav>
</header>
@RenderSection("IndexPageSection",required:false)
<br />
<partial name="_ImagesCarouselPartialView">
<br /><br />
<partial name="_MainCarouselPartialView">
<main class="container mt-5" dir="ltr">
@RenderBody()
</main>
<footer class="right-0 bottom-0 left-0 mt-5" dir="rtl">
<partial name="_FooterPartialView">
</footer>
<script src="~/js/site.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@@aspnet/signalr@@1.0.2/dist/browser/signalr.js" integrity="sha384-gjN8HGdgW45EWYHOqrWrZ8XHLv1zKBralQ9UU94n//6MvoCdsF3NJrBt9FssrFK3" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js" integrity="sha256-CutOzxCRucUsn6C6TcEYsauvvYilEniTXldPa6/wu0k=" crossorigin="anonymous"></script>
<script src="https://www.google.com/recaptcha/api.js"></script>
@await RenderSectionAsync("Scripts", required: false)
,,,
Component method
,,,
public class AccountMenuComponent : ViewComponent
{
private readonly IAccountService _accountService;
public AccountMenuComponent(IAccountService accountService)
{
_accountService = accountService;
}
[Authorize]
public async Task<IViewComponentResult> InvokeAsync()
{
return View("/Views/Components/AccountMenuComponent.cshtml", _accountService.GetAnAccount);
}
}
,,,
