The reason why JavaScript is not running on the main page of the Blazer, considering that we have access to the main file when running the web application and the link to the JavaScript file, it works correctly, and when you click on it, the code is displayed correctly and completely in the Ceres section. It will be given. But the JavaScript function is not called or is not executed at all. My codes are as follows:
function opeSublist() {
try {
if (checkFirstList == 0) {
checkFirstList = 1;
}
var checkList = document.getElementById('FirstList');
checkList.getElementsByClassName('anchor')[0].onclick = function(evt) {
if (checkList.classList.contains('visible'))
checkList.classList.remove('visible');
else
checkList.classList.add('visible');
}
} catch {}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Blazor App</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="LosacoWeb.Client.styles.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<script src="multiselect-dropdown.js"></script>
<script>
navigator.serviceWorker.register('service-worker.js');
</script>
<link href="_content/Blazored.Modal/blazored-modal.css" rel="stylesheet" />
<link href="LosacoWeb.Client.styles.css" rel="stylesheet" />
<script src="_content/Blazored.Modal/blazored.modal.js"></script>
<script src="js/jquery-2.1.1.min.js"></script>
<link href="manifest.json" rel="manifest" />
<link rel="icon" href="images/cropped-lorchlogo-2022-32x32.png" sizes="32x32" />
<link rel="icon" href="images/cropped-lorchlogo-2022-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" sizes="512x512" href="images/logoFa512.png" />
<link href="_content/Blazor.PersianDatePicker/datepicker.css" rel="stylesheet" />
</head>
<body dir="rtl">
<div id="app">
<div class="d-flex justify-content-center" style="margin-top:10%;">
<div class="flex-column align-items-center">
<img src="images/LogoFaNew.png" />
<div class="linear-activity">
<div class="indeterminate"></div>
</div>
</div>
</div>
</div>
<div id="blazor-error-ui">
Error ...!
<a href="" class="reload">Referesh . . .</a>
<a class="dismiss"></a>
</div>
<script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>
<script src="_framework/blazor.webassembly.js"></script>
<script>
navigator.serviceWorker.register('service-worker.js');
</script>
<script src="js/plugins.min.js"></script>
<script src="js/toastr.min.js"></script>
</body>
</html>and the javascript function is inside of multiselect-dropdown.js javascript separate file. But it is not clear to me why this function is not executed and the result is not displayed. In fact, by clicking on a DIV, a list should be displayed, and by clicking outside the list, the list should be removed from the display mode. All steps are correct. And in a normal HTML page, this function is executed correctly. But when transferred to Blazor, it does not run. I do exactly the same things I did on the HTML page in Blazer. But it has no effect.