Problems with browsing pages with AJAX - html

Question

I have the following Menu on my page "Index.php"
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Snackbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Sales
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Local</a></li>
<li><a class="dropdown-item" href="#">Residence</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Purchases</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Registrations
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item Exibe-Lista" onclick="Load_Page('../D_PHP/ProductRegistration.php');">Products</a></li>
<li><a class="dropdown-item" onclick="Load_Page('../D_PHP/CustomerRegistration.php');">Customers</a></li>
<li><a class="dropdown-item" onclick="Load_Page('../D_PHP/EmployeeRegistration.php');">Employees</a></li>
<li><a class="dropdown-item" onclick="Load_Page('../D_PHP/ManufacturerRegistration.php');">Manufacturer</a></li>
<li><a class="dropdown-item" onclick="Load_Page('../D_PHP/ContactRegistration.php');">Contacts</a></li>
<li><a class="dropdown-item" onclick="Load_Page('../D_PHP/SaleStatusRegistration.php');">Sale Status</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Notes</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Bills
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">To Receive</a></li>
<li><a class="dropdown-item" href="#">To Pay</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Search</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Reports</a>
</li>
</ul>
</div>
</div>
</nav>
Corresponding to the page "Index.php" I have the file "Index.js" with the following function:
function Load_Page(fileList)
{
if (fileList)
{
$.ajax({
type: 'GET',
data: fileList,
url: fileList,
success: function (data) {
$("#Content").html(data);
}
});
}
}
The AJAX function is called when the user clicks on the buttons on the Register Menu > Customers || Products || Employees || Manufacturer || Contacts || State of Sale. However, when I click on these buttons for the page to be invoked by AJAX, the following error occurs:
Uncaught ReferenceError: Load_Page is not defined at
HTMLAnchorElement.onclick
I am not able to find the error since the code is correct, and the function that is called in onclick is also. What would be the cause of this error?