ASP.NET环境下HTML调用JavaScript函数无响应问题求助

问题排查与解决步骤 #

• 避免命名冲突：e是全局作用域里的常用变量名（比如事件对象的缩写），很容易和内置变量冲突，导致函数无法正常调用。直接修改函数名即可，比如改成updateText。

• 替换内联事件绑定：内联onclick容易受全局作用域、加载顺序影响，改用addEventListener更稳定：

  1. 移除按钮上的onclick属性；
  2. 在JS中监听DOM加载完成事件，再给按钮绑定点击事件。

• 验证静态文件状态：打开浏览器开发者工具（F12），检查网络标签确认index.js是否正常加载（无404错误），控制台标签查看是否有函数未定义等报错。

修改后的完整代码示例 #

JavaScript（wwwroot/index.js） #

function updateText() {
    const targetElement = document.getElementById("c");
    targetElement.innerText = "e";
}

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('CalculationButton').addEventListener('click', updateText);
});

HTML（wwwroot/index.html） #

<!DOCTYPE html>
<html>
<head>
    <script src="index.js"></script>
    <link type="text/css" rel="stylesheet" href="index.css" />
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <button id="CalculationButton">Find Type Interactions</button>
    <p id="c">Stuff</p>
</body>
</html>

C#（Program.cs） #

public static void Main(string[] args)
{
    var builder = WebApplication.CreateBuilder(args);
    var app = builder.Build();

    app.UseDefaultFiles();
    app.UseStaticFiles();

    app.Run();
}

内容的提问来源于stack exchange，提问作者TheEmeraldEnd