本文解决因 `
在构建前端聊天机器人时，一个看似微小却极易被忽略的错误——HTML 中
你提供的 index.html 中存在关键拼写错误：
✅ 正确写法应为：
scr 是无效属性，浏览器会静默忽略该标签，因此 main.js 中定义的 sendBtn.addEventListener(...) 等逻辑从未注册，导致点击“Send”按钮毫无反应，textbox.value 也无法被读取——不是 .value 不存在，而是 textbox 变量根本没被赋值（因脚本未执行）。
立即学习“Java免费学习笔记（深入）”；
✅ 修复后完整工作流程
- 确保 HTML 结构完整：你的 input#mytextbox 和 button#sendBtn 已正确定义，无需修改；
- 修正 script 标签：将 scr 改为 src；
- 建议增强健壮性：在 main.js 中添加 DOM 加载检查，避免脚本执行过早：
// main.js
document.addEventListener('DOMContentLoaded', function () {
const sendBtn = document.getElementById('sendBtn');
const textbox = document.getElementById('mytextbox');
const chatContainer = document.getElementById('chatContainer');
if (!sendBtn || !textbox || !chatContainer) {
console.error('Required DOM elements not found!');
return;
}
function sendMessage(messageText) {
if (!messageText.trim()) return; // 忽略空消息
const messageElement = document.createElement('div');
messageElement.className = 'w-50 float-end shadow-sm';
messageElement.style.cssText = 'margin: 10px; padding: 5px;';
messageElement.innerHTML = `
You:
${messageText}
`;
chatContainer.appendChild(messageElement);
// 发送后清空输入框并聚焦（提升体验）
textbox.value = '';
textbox.focus();
}
sendBtn.addEventListener('click', () => {
sendMessage(textbox.value);
});
// 支持回车发送（可选增强）
textbox.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
sendMessage(textbox.value);
}
});
});⚠️ 注意事项
- 路径验证：确保 js/main.js 文件真实存在于项目目录中，且路径大小写与实际文件一致（尤其在 Linux/macOS 环境下区分大小写）；
- 浏览器缓存：修复后若仍不生效，请强制刷新（Ctrl+F5 或 Cmd+Shift+R），排除缓存旧 HTML 的可能；
- 控制台调试：打开浏览器开发者工具（F12 → Console），确认无 404 报错（如 GET http://.../js/main.js net::ERR_ABORTED），这是 src 路径错误的典型表现；
- Bootstrap 依赖：你已正确引入 Popper 和 Bootstrap JS，但注意 bootstrap.min.js 依赖 Popper，需保持引入顺序（当前 HTML 中顺序正确）。
完成以上修正后，输入文字 → 点击 Send 或按 Enter → 消息将实时渲染到 #chatContainer 中，textbox.value 将正常返回输入内容。这个案例再次印证：前端调试不仅要看逻辑，更要严查基础语法与加载链路。
