【发布时间】：2023-02-07 16:42:31
【问题描述】：
我尝试完成制作一个聊天机器人，但听起来我的代码有问题但没有出现错误 我尝试调试代码但没有出现错误，我尝试在聊天容器中获取消息，但主要是在聊天容器中获取消息。 js wen 我尝试访问输入类型的文本值，当我尝试let messageText = textbox.value; 时，.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 scr="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){
var messageElement = document.createElement('div');
messageElement.classList.add('w-50');
messageElement.classList.add('float-end');
messageElement.classList.add('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);
}
sendBtn.addEventListener('click', function(e){
let messageText = textbox.value;
console.log(e);
sendMessage(messageText);
});
我尝试完成制作一个聊天机器人，但听起来我的代码有问题但没有出现错误 我尝试调试代码但没有出现错误，我尝试在聊天容器中获取消息，但主要是在聊天容器中获取消息。当我尝试访问输入类型文本值时，当我尝试访问 let messageText = textbox.value; 时，.js 不存在。我看不到任何错误，显然这是我的 index.html 文件。
我还尝试更改为var textbox = document.getElementById('mytextbox').value;，点击时没有任何反应，并且输入内的文本未在聊天容器中创建。
【问题讨论】：
标签： javascript html