Java Servlet 中嵌入 JavaScript 的常见错误及修复方法-java教程-PHP中文网

Java Servlet 中嵌入 JavaScript 的常见错误及修复方法

Servlet 动态生成 HTML 时，若在标签中同时指定 src 属性并内嵌 JS 代码，浏览器将忽略标签体内容，导致 DOM 元素未初始化即被访问，引发“Cannot set properties of undefined”错误。

servlet 动态生成 html 时，若在 `<script>` 标签中同时指定 `src` 属性并内嵌 js 代码，浏览器将忽略标签体内容，导致 dom 元素未初始化即被访问，引发“cannot set properties of undefined”错误。</script>

在 Java Servlet 中通过 PrintWriter out 输出 HTML 和内联 JavaScript 是常见做法，但需严格遵循 HTML 规范。你遇到的 Uncaught TypeError: Cannot set properties of undefined (setting 'innerHTML') 错误，根本原因在于以下非法写法：

Java JDK 25

Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。

下载

out.println("<script type="text/javascript" src="app.js">");
out.println("Calendar.$calendar = document.querySelector('.calendar')");
out.println("Calendar.$date = document.querySelector('.cur-date')");
out.println("Calendar.init()");
out.println("</script>");

⚠️ 问题解析：
HTML 规范明确规定——当 <script> 标签包含 src 属性时，其<strong>标签体内容（即内部 JavaScript）将被完全忽略。浏览器只会加载并执行 app.js，而不会运行你写在 <script> 标签内的四行初始化代码。因此，Calendar 对象（很可能定义在 app.js 中）尚未完成初始化，或 document.querySelector(...) 返回 null（因 DOM 尚未就绪），进而导致对 undefined 调用 .innerHTML 等属性时抛出 TypeError。</script>

✅ 正确写法：分离外部脚本引入与内联初始化逻辑：

out.println("<script type="text/javascript" src="app.js"></script>");
out.println("<script type="text/javascript">");
out.println("  // 确保 DOM 已加载完成");
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 && Calendar.$date) {");
out.println("      Calendar.init();");
out.println("    } else {");
out.println("      console.error('Calendar or required DOM elements not found.');");
out.println("    }");
out.println("  });");
out.println("</script>");
out.println("

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南