我想为我的Blazor Server应用程序修改this webgazer for eye tracking的this HTML code for the calibration。但启动应用程序时，$（document）. ready（function（）-应从calibration.js调用--无法启动。
剃刀组件，我想在这里实现它，看起来像这样：
@page "/Calibration"
@inject IJSRuntime JS
<h1>Calibration</h1>
<ul class="nav navbar-nav">
<li id="Accuracy"><a>Not yet Calibrated</a></li>
<li> <button @onclick="CalibrateWebgazer">Calibrate WebGazer</button></li>
</ul>
<div class="calibrationDiv">
<button class="Calibration" id="Pt1"></button>
<button class="Calibration" id="Pt2"></button>
<button class="Calibration" id="Pt3"></button>
<button class="Calibration" id="Pt4"></button>
<button class="Calibration" id="Pt5"></button>
<button class="Calibration" id="Pt6"></button>
<button class="Calibration" id="Pt7"></button>
<button class="Calibration" id="Pt8"></button>
<button class="Calibration" id="Pt9"></button>
</div>
@code {
private async Task CalibrateWebgazer()
{
await JS.InvokeAsync<object>("Restart");
}
public async ValueTask DisposeAsync() => await this.DisposeAsync();
}我把所有的javascript文件放在一个wwwroot/js文件夹中，并在_Layout. cshtml文件中添加了它们的script标记：
`<script src="_framework/blazor.server.js"></script>
<script src="~/js/main.js"></script>
<script src="~/js/webgazer.js"></script>
<script src="~/js/gaze.js"></script>
<script src="~/js/jquery.min.js"></script>
<script src="~/js/calibration.js"></script>
<script src="~/js/precision_calculation.js"></script>
<script src="~/js/precision_store_points.js"></script>
<script src="~/js/resize_canvas.js"></script>
<script src="~/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>`点击校准按钮时，$（document）. ready（function（）中定义的函数不会执行。
我需要进行哪些更改才能使其正常工作？如何以及何时进行$（文档）.准备就绪（function（）被调用？在provided HTML example中，仅调用了main. js中的Restart函数-为什么**$（文档）.准备就绪（function（）fromcalibration. js**在这种情况下会触发，或者我错过了什么？由于我是编程新手，我非常感谢解释，为什么这行不通。
1条答案
按热度按时间lb3vh1jj1#
好的，让我们看看。我还没有阅读关于WebGazer.js的文档，以及脚本的顺序应该是什么，所以我检查了你提供的代码示例。我注意到那里的脚本导入方式与你的不同。
因此，在
_Layout.cshtml中，尝试将这些放在body标记的底部，如下所示：你可能注意到
~/js/gaze.js被注解了，很遗憾，我在你提供的GitHub仓库里找不到这个脚本，但它看起来是根据你的代码编写的。现在我们几乎完成了。如果您尝试运行应用程序，您将在浏览器的开发工具控制台中收到错误消息
Cannot read properties of null (reading 'getContext') at ClearCanvas (calibration.js:10:10)。要解决此问题，您必须在HTML中提供canvas元素，如下所示：我也在你提供的示例代码中找到了它。它应该可以工作！