本文详解因 script 标签属性拼写错误（`scr` 误写为 `src`）导致 dom 元素无法获取、用户输入无法读取的问题，并提供完整修复方案与最佳实践。
在构建前端聊天机器人时，一个看似微小却极具破坏性的错误，往往会导致整个交互逻辑“静默失效”——没有报错、页面正常渲染，但点击发送后毫无反应。你遇到的正是这类典型问题：textbox.value 报 undefined 或直接抛出 Cannot read property 'value' of null，而调试时 document.getElementById('mytextbox') 返回 null。
根本原因在于 HTML 中的脚本引入写法存在拼写错误：
<script scr="js/main.js"></script>
⚠️ 注意：scr 是无效属性，浏览器完全忽略该标签，main.js 根本未被加载！因此后续所有 JavaScript 逻辑（包括 getElementById、事件监听、sendMessage 函数）均未执行，textbox 变量实际为 undefined，调用 .value 自然失败。
✅ 正确写法应为：
立即学习“Java免费学习笔记（深入）”；
<script src="js/main.js"></script>
此外，为确保 DOM 元素在脚本执行时已就绪，推荐两种增强方案：
✅ 方案一：将 <script> 移至 </body> 前（推荐）
<!-- 在 </body> 闭合前引入 --> <script src="js/main.js"></script>
此时 HTML 已解析完毕，所有元素均可安全访问。
✅ 方案二：使用 DOMContentLoaded 事件（更健壮）
修改 main.js 开头：
document.addEventListener('DOMContentLoaded', function() {
// 所有 DOM 操作和事件绑定放在此处
var sendBtn = document.getElementById('sendBtn');
var textbox = document.getElementById('mytextbox');
var chatContainer = document.getElementById('chatContainer');
function sendMessage(messageText) {
if (!messageText?.trim()) return; // 防空消息
var messageElement = document.createElement('div');
messageElement.className = 'w-50 float-end shadow-sm';
messageElement.style.cssText = 'margin: 10px; padding: 5px;';
messageElement.innerHTML = `
<span>You: </span>
<span style="margin-top: 10px; padding: 10px;">${messageText}</span>
`;
chatContainer.appendChild(messageElement);
textbox.value = ''; // 清空输入框
chatContainer.scrollTop = chatContainer.scrollHeight; // 滚动到底部
}
sendBtn.addEventListener('click', function() {
sendMessage(textbox.value);
});
// 支持回车发送（增强体验）
textbox.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
sendMessage(textbox.value);
}
});
});? 验证是否修复成功？
- 打开浏览器开发者工具（F12）→ Console 标签页；
- 输入 typeof textbox —— 应返回 "object"（而非 "undefined"）；
- 输入 textbox.value —— 应返回当前输入框文本（如 "Hello"）；
- 点击 Send 按钮，消息应实时出现在聊天容器中。
? 额外提示：Bootstrap 5+ 已弃用 float-* 类（推荐改用 text-end + d-inline-block 或 Flex 布局），且 input-group-append 在 Bootstrap 5 中已替换为 input-group-text。如需长期维护，建议升级 HTML 结构并启用现代 CSS 布局。
修复 scr → src 这一拼写错误，是让聊天机器人“开口说话”的第一步——简洁、关键、不容忽视。
