USER
let files = [];
let dotCount = 0; // For dot animation
let intervalId;
document.getElementById('uploadButton').addEventListener('click', function() {
document.getElementById('fileInput').click(); // Trigger click on hidden file input
});
document.getElementById('fileInput').addEventListener('change', function(event) {
const file = event.target.files[0];
const uploadButton = document.getElementById('uploadButton');
const sendButton = document.getElementById('sendButton');
const fileList = document.getElementById('fileList');
if (file) {
files.push(file);
uploadButton.classList.add('active');
sendButton.disabled = files.length === 0; // Enable send button if at least one file is uploaded
// Create file item element
const fileItem = document.createElement('div');
fileItem.classList.add('file-item');
fileItem.innerHTML = `File: ${file.name} <span class="remove-file">×</span>`;
fileList.appendChild(fileItem);
const removeFileButton = fileItem.querySelector('.remove-file');
removeFileButton.addEventListener('click', function() {
files = files.filter(f => f.name !== file.name); // Remove the file from array
if (files.length === 0) {
uploadButton.classList.remove('active');
sendButton.disabled = true; // Disable send button if no files
}
fileItem.remove();
});
}
});
document.getElementById('sendButton').addEventListener('click', function() {
const input = document.getElementById('messageInput');
const messageText = input.value;
if (messageText) {
const messageArea = document.getElementById('messageArea');
const messageElement = document.createElement('div');
messageElement.classList.add('message', 'sent');
messageElement.innerText = messageText;
messageArea.appendChild(messageElement);
// Append all uploaded files
files.forEach(file => {
const fileElement = document.createElement('div');
fileElement.innerText = `File: ${file.name}`;
messageElement.appendChild(fileElement);
});
// Start dot animation for bot response
startDotAnimation();
setTimeout(() => {
const processingMessage = document.createElement('div');
processingMessage.classList.add('message', 'bot-response');
processingMessage.innerText = "Запрос обрабатывается, ожидайте";
messageArea.appendChild(processingMessage);
const dotMessage = document.createElement('div');
dotMessage.classList.add('message', 'bot-response', 'dot-animation');
dotMessage.innerText = "."; // Initialize with one dot
messageArea.appendChild(dotMessage);
intervalId = setInterval(() => {
if (dotCount < 5) {
dotCount++;
dotMessage.innerText += ".";
} else {
clearInterval(intervalId);
}
}, 50); // Increase dots every 50ms
messageArea.scrollTop = messageArea.scrollHeight;
input.value = '';
// Reset files to remain in input field
}, 1000); // Simulate processing time after a delay
}
});
// Start dot animation
function startDotAnimation() {
dotCount = 0;
}
// Clean up after sending
document.getElementById('messageInput').addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
document.getElementById('sendButton').click();
}
});
uploadButton.addEventListener('mouseover', function() {
if (!files.length) {
this.title = "Нет загруженного файла"; // Tooltip for no uploaded file
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Messenger App</title>
{% load static %}
<link rel="stylesheet" href="{% static 'chat_main.css' %}">
</head>
<body>
<script src="{% static 'js_main.js' %}"></script>
<div class="container">
<div class="tab-container">
<div class="logo">
<img src="https://picsum.photos/seed/QPLkTrZy1Bwsxn4XvF17g/512" alt="Logo">
</div>
</div>
<div class="message-area">
<div class="messages" id="messageArea"></div>
</div>
<div class="file-list" id="fileList"></div>
<div class="input-area">
<button id="uploadButton">Upload File</button>
<input type="file" id="fileInput" style="display: none;" >
<input type="text" id="messageInput" placeholder="Type a message..." >
<button id="sendButton" disabled>Send</button>
</div>
</div>
</body>
</html>
не работает js хотя файл загрузилсяASSISTANT
Если ваш JavaScript-файл загружается, но не работает, необходимо проверить несколько моментов, чтобы убедиться, что все настроено правильно и JavaScript выполняется корректно. Вот шаги, которые помогут вам диагностировать и исправить проблему:
### 1. Убедитесь, что JavaScript загружается
Откройте инструменты разработчика вашего браузера (F12 на большинстве браузеров) и перейдите на вкладку "Сеть" (Network). Поищите ваш файл `js_main.js`. Убедитесь, что он загружается без ошибок (код состояния 200) и доступен в браузере.
### 2. Проверьте консоль на наличие ошибок
На вкладке "Консоль" (Console) в инструментах разработчика проверьте наличие ошибок, связанных с JavaScript. Все ошибки, возникающие при выполнении скрипта, будут отображены там. Особенно обратите внимание на ошибки, связанные с переменными или методами, которые могут быть ненайденными.
### 3. Убедитесь, что JavaScript выполняется в правильное время
Если JavaScript файл загружается до загрузки DOM, возможно, он пытается получить доступ к элементам, которых еще не существует. Убедитесь, что ваш JavaScript код выполняется после загрузки HTML-документа, добавив его в конец `<body>` или обернув его в событие `DOMContentLoaded`.
Пример:
```html
<script>
document.addEventListener("DOMContentLoaded", function() {
// Ваш JavaScript код здесь
let files = [];
// Остальной код...
});
</script>
```
### 4. Проверка на наличие ошибок в коде
Пройдите по коду и проверьте, нет ли мест, где переменные могли бы быть не определены или использованы неправильно. Например, убедитесь, что элементы `uploadButton`, `sendButton`, и `fileInput` действительно существуют на момент доступа к ним.
### 5. Проверка элементов HTML
Проверьте, совпадают ли идентификаторы (`id`), используемые в JavaScript, с теми, что указаны в HTML. Например, убедитесь, что в HTML действительно есть элементы с такими идентификаторами, как `uploadButton`, `sendButton`, и `fileInput`.
### 6. Отладка через `console.log`
Добавьте `console.log` в разные места кода, чтобы проверить, выполняется ли код и где именно он останавливается. Например:
```javascript
console.log("Upload button clicked");
```
Это поможет вам понять, до какого момента доходит выполнение кода.
### 7. Пример исправленного JavaScript
Вот обновленный пример вашего JavaScript с учетом некоторых из перечисленных выше рекомендаций:
```javascript
document.addEventListener("DOMContentLoaded", function() {
let files = [];
let dotCount = 0; // Для анимации точек
let intervalId;
document.getElementById('uploadButton').addEventListener('click', function() {
document.getElementById('fileInput').click(); // Триггер для скрытого файла
});
document.getElementById('fileInput').addEventListener('change', function(event) {
const file = event.target.files[0];
const uploadButton = document.getElementById('uploadButton');
const sendButton = document.getElementById('sendButton');
const fileList = document.getElementById('fileList');
if (file) {
files.push(file);
uploadButton.classList.add('active');
sendButton.disabled = files.length === 0; // Включить кнопку "Отправить", если хотя бы один файл загружен
// Создать элемент для файла
const fileItem = document.createElement('div');
fileItem.classList.add('file-item');
fileItem.innerHTML = `File: ${file.name} <span class="remove-file">×</span>`;
fileList.appendChild(fileItem);
const removeFileButton = fileItem.querySelector('.remove-file');
removeFileButton.addEventListener('click', function() {
files = files.filter(f => f.name !== file.name); // Удалить файл из массива
if (files.length === 0) {
uploadButton.classList.remove('active');
sendButton.disabled = true; // Отключить кнопку "Отправить", если файлов нет
}
fileItem.remove();
});
}
});
document.getElementById('sendButton').addEventListener('click', function() {
const input = document.getElementById('messageInput');
const messageText = input.value;
if (messageText) {
const messageArea = document.getElementById('messageArea');
const messageElement = document.createElement('div');
messageElement.classList.add('message', 'sent');
messageElement.innerText = messageText;
messageArea.appendChild(messageElement);
// Добавить все загруженные файлы
files.forEach(file => {
const fileElement = document.createElement('div');
fileElement.innerText = `File: ${file.name}`;
messageElement.appendChild(fileElement);
});
// Начать анимацию точек для ответа бота
startDotAnimation();
setTimeout(() => {
const processingMessage = document.createElement('div');
processingMessage.classList.add('message', 'bot-response');
processingMessage.innerText = "Запрос обрабатывается, ожидайте";
messageArea.appendChild(processingMessage);
const dotMessage = document.createElement('div');
dotMessage.classList.add('message', 'bot-response', 'dot-animation');
dotMessage.innerText = "."; // Инициализация с одной точкой
messageArea.appendChild(dotMessage);
intervalId = setInterval(() => {
if (dotCount < 5) {
dotCount++;
dotMessage.innerText += ".";
} else {
clearInterval(intervalId);
}
}, 50); // Увеличивать точки каждые 50мс
messageArea.scrollTop = messageArea.scrollHeight;
input.value = '';
// Сброс файлов, чтобы остаться в поле ввода
}, 1000); // Симуляция времени обработки после задержки
}
});
// Запуск анимации точек
function startDotAnimation() {
dotCount = 0;
}
// Убираем после отправки
document.getElementById('messageInput').addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
document.getElementById('sendButton').click();
}
});
uploadButton.addEventListener('mouseover', function() {
if (!files.length) {
this.title = "Нет загруженного файла"; // Всплывающая подсказка для отсутствия загруженного файла
}
});
});
```
### 8. Проверка кода HTML
Убедитесь, что ваш HTML правильно загружает и организует элементы. Ваш файл должен содержать правильный идентификатор и структуру, как вы привели ранее.
Если после всех этих действий проблема не решается, пожалуйста, предоставьте сообщения из консоли ошибок, чтобы помочь вам более точно.