聊天机器人开发问题：无法获取input.value且点击发送无响应

问题描述 #

开发聊天机器人时，代码无报错但功能异常：

• 尝试用let messageText = textbox.value;获取输入框值时，提示.value属性不存在
• 修改为var textbox = document.getElementById('mytextbox').value;后，点击发送按钮无反应，输入内容无法添加到聊天容器

问题根源 #

1. 脚本引入拼写错误：HTML中引入main.js的标签里，scr应为src，导致JS文件根本没加载，所有交互逻辑失效
2. HTML语法错误：聊天容器内的示例消息标签闭合错误（</span">多了一个引号），可能干扰DOM解析
3. 变量赋值错误：若直接将textbox赋值为document.getElementById('mytextbox').value，变量会变成字符串而非DOM元素，后续无法再通过.value获取实时输入值

修复后的代码 #

index.html #

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="description" content="ChatBot">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="Helder Ventura">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>ChatBot</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

</head>
<body>


    <div class="container">

        <h1 class="text-center">Awesome Chatbot App</h1>
        <div class="media">
            <img class="rounded-circle float-left img-thumbnail" width="75px" src="https://i.imgur.com/8BlgN6L.png" alt="Generic placeholder image">
            <div class="media-body">
              <h5 style="margin:10px">ChatBot</h5>
                 <span style="margin-left: 10px;">Online</span>
            </div>
          </div>

    <!--Messages Container-->
    <div id="chatContainer" class="container border overflow-auto" style="height:500px">

        <!--Chatbot message design-->
        <div class="w-50 float-start shadow-sm" style="margin: 10px; padding: 5px;">
            <span>Chat: </span>
            <span style="margin-top: 10px; padding: 10px;">How are You?</span>
        </div>

        <!--User message design-->
        <div class="w-50 float-end shadow-sm" style="margin: 10px; padding: 5px;">
            <span>You: </span>
            <span style="margin-top: 10px; padding: 10px;">Great</span>
        </div>

    </div>
    <div class="input-group">
        <input id="mytextbox" type="text" class="form-control"/>
        
        <div class="input-group-append">
            
            <button id="sendBtn" type="button" class="btn btn-primary">Send</button>
        </div>

    </div>
    
</div>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
    
<script src="js/main.js"></script>
</body>
</html>

main.js（优化版） #

//elements
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.classList.add('w-50', 'float-end', 'shadow-sm');
    messageElement.style.margin = "10px";
    messageElement.style.padding = "5px";

    messageElement.innerHTML = `<span>You: </span>
<span style='margin-top:10px; padding:10px'>${messageText}</span>`;

    chatContainer.appendChild(messageElement);

    // 修复浮动布局高度计算问题
    var clearfix = document.createElement('div');
    clearfix.classList.add('clearfix');
    chatContainer.appendChild(clearfix);

    // 清空输入框并聚焦
    textbox.value = '';
    textbox.focus();

    // 自动滚动到最新消息
    chatContainer.scrollTop = chatContainer.scrollHeight;
}

sendBtn.addEventListener('click', function(){
    let messageText = textbox.value;
    sendMessage(messageText);
});

// 支持回车发送
textbox.addEventListener('keypress', function(e){
    if(e.key === 'Enter'){
        sendMessage(textbox.value);
    }
});

修复说明 #

1. 修正了HTML中脚本引入的拼写错误，确保JS逻辑正常加载
2. 修复了示例消息的标签闭合问题，保证DOM结构正确
3. 保留textbox为DOM元素引用，确保能实时获取输入值
4. 添加了空消息过滤、输入框清空、回车发送和自动滚动的优化，提升交互体验

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