How to Ignore the error in querySelector?

I have a function on my javascript with querySelector when I clicked the Logout button the querySelector throws an error. How do I ignore this error? Because It blocks my function Logout().

Here’s my querySelector function

const parent = document.querySelectorAll(‘.nav-link’);

for (var i = 0; i < parent.length; i++) {
parent[i].onclick = (e) => {
const current_child = e.currentTarget.querySelector(‘.items-title’).innerText;
swal.fire({
html: “Loading..”,
timer: 1000,
icon: “info”,
timerProgressBar: true,
allowEscapeKey: false,
allowOutsideClick: false,
showConfirmButton: false,
showCancelButton: false,
didOpen: () => {
timerInterval = setInterval(() => { }, 100)
},
willClose: () => {
clearInterval(timerInterval);
}
}).then(() => {
$.ajax({
url: “/Shop/Results”,
data: {
result: current_child,
},
type: “GET”,
dataType: “html”,
success: function (result) {
$(“#result”).html(result);
$(“.false”).html(result);
}
})
})
}
}

Here’s my HTML logout:

<li class=”nav-item”>
<a class=”nav-link first changing-color”>@ViewBag.username</a>
</li>
<li class=”nav-item”>
<a class=”nav-link first changing-color” id=”search”><i class=”fal fa-search”></i></a>
<select class=”form-control” id=”search-bar” onmousedown=”if(this.options.length>8){this.size=8;}” onchange=’this.size=0;’ onblur=”this.size=0;”>
<option selected></option>
</select>
</li>
<li class=”nav-item”>
<a class=”nav-link first changing-color” asp-action=”Index” asp-controller=”Wishlist”><i class=”fal fa-heart”></i></a>
</li>
<li class=”nav-item”>
<a class=”nav-link first changing-color” asp-action=”Index” asp-controller=”Cart”><i class=”fal fa-shopping-cart”></i></a>
</li>
<li class=”nav-item”>
<a class=”nav-link first changing-color”>₱@ViewBag.savings</a>
</li>
<li class=”nav-item”>
<form asp-action=”Logout” asp-area=”” asp-controller=”Home” method=”post” id=”logout”>
<a class=”nav-link first changing-color” onclick=”logout()”>LOGOUT</a>
</form>
</li>

Here’s my HTML to use querySelector

<div class=”image-background”>
<div class=”container”>
<div class=”text-center”>
<div class=”wrapper-content”>
<div class=”wrapper-title”>
SHOP
</div>
<br />
<div class=”wrapper-nav”>
<nav class=”navbar navbar-expand-lg navbar-dark bg-transparent”>
<div class=”container”>
<button class=”navbar-toggler” style=”margin: auto;” type=”button” data-bs-toggle=”collapse” data-bs-target=”#shopbar” aria-controls=”shopbar” aria-expanded=”false” aria-label=”Toggle navigation”>
<span class=”navbar-toggler-icon”></span>
</button>
<div class=”collapse navbar-collapse” id=”shopbar”>
<ul class=”navbar-nav mx-auto mb-2 mb-lg-0″>
<li class=”nav-item”>
<a class=”nav-link” id=”unca”>
<table>
<tr>
<th rowspan=”2″></th>
<th class=”items-title”>UNCATEGORIZED</th>
</tr>
<tr>
<td>@ViewBag.total_items ITEMS</td>
</tr>
</table>
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>

I removed some of my <li>