Java Servlet与JavaScript交互异常：如何修复Uncaught TypeError错误？

核心错误原因 #

1. 带src的script标签不能混用内联代码：你当前输出的<script>标签同时包含src="app.js"和内联JS代码，浏览器会直接忽略内联部分，导致Calendar.$calendar、Calendar.$date的赋值完全没执行，Calendar对象里的DOM引用仍为undefined，调用init()时尝试设置innerHTML就会触发类型错误。
2. DOM元素未加载完成就执行JS：就算内联代码能运行，当前脚本在</body>前执行时，页面上的.calendar和.cur-date元素还没被浏览器渲染出来，document.querySelector会返回null，后续操作同样会报错。

修复步骤 #

步骤1：拆分script标签 #

把引入外部JS和内联初始化代码分成两个独立的<script>标签：

// 先引入外部app.js
out.println("<script type='text/javascript' src='app.js'></script>");
// 单独写内联初始化代码
out.println("<script type='text/javascript'>");
out.println("Calendar.$calendar = document.querySelector('.calendar')");
out.println("Calendar.$date = document.querySelector('.cur-date')");
out.println("Calendar.init()");
out.println("</script>");
out.println("</body></html>");

步骤2：确保DOM加载完成后执行初始化 #

有两种可靠方式保证JS在DOM就绪后执行：

方式A：固定脚本位置到</body>最末尾

确保.calendar和.cur-date的HTML代码在脚本之前输出（即这些DOM元素的渲染顺序早于脚本执行），你的当前代码结构已接近这个要求，只需确认元素代码在脚本前输出即可。

方式B：用DOMContentLoaded事件包裹初始化逻辑

如果无法调整脚本位置，就通过事件监听确保DOM完全加载后再执行代码，同时增加元素存在性判断避免额外报错：

out.println("<script type='text/javascript' src='app.js'></script>");
out.println("<script type='text/javascript'>");
out.println("document.addEventListener('DOMContentLoaded', function() {");
out.println("  Calendar.$calendar = document.querySelector('.calendar')");
out.println("  Calendar.$date = document.querySelector('.cur-date')");
out.println("  if (Calendar.$calendar && Calendar.$date) {");
out.println("    Calendar.init()");
out.println("  } else {");
out.println("    console.error('Calendar相关DOM元素未找到，请检查类名拼写')");
out.println("  }");
out.println("});");
out.println("</script>");
out.println("</body></html>");

步骤3：检查app.js中的Calendar对象定义 #

确保app.js里的Calendar对象已正确预留属性或允许动态赋值，比如：

// app.js中的基础定义示例
const Calendar = {
  $calendar: null,
  $date: null,
  init: function() {
    // 这里的逻辑依赖$calendar和$date已正确指向DOM元素
    this.$date.innerHTML = new Date().toLocaleDateString();
    // 其他日历初始化逻辑
  }
};

额外排查点 #

• 确认页面上确实存在带有.calendar和.cur-date类名的DOM元素，无拼写错误。
• 打开浏览器开发者工具（F12）的Console面板，查看是否有其他前置错误导致Calendar对象未定义。

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