Basically I was developing a chatApp using ws module and facing some issue on the frontend side regarding the the code not able to get a function in its scope.
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Real-Time Chat</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div id="chat-window" class="chat-box"></div>
<div class="input-container">
<input type="text" id="message-input" placeholder="Type your message...">
<!-- Corrected onclick syntax -->
<button id="send-btn">Send</button>
</div>
</div>
<!-- Include client.js script -->
<script src="client.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const sendButton = document.getElementById('send-btn');
// Corrected event listener registration without invoking the function
sendButton.addEventListener('click', sendMessage);
});
</script>
</body>
</html>
this is the html code I am using on the frontend
style.css
body {
font-family: Arial, sans-serif;
background-color: #fffdd0; /* Light yellow background */
margin: 0;
display: flex;
justify-content: center; /* Aligns content horizontally */
align-items: center; /* Aligns content vertically */
height: 100vh; /* Full viewport height */
}
.container {
max-width: 600px;
width: 100%;
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
padding: 20px;
}
.chat-box {
height: 300px;
overflow-y: scroll;
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
}
.input-container {
display: flex;
}
#message-input {
flex: 1; /* Takes remaining space */
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
margin-right: 10px;
}
button {
padding: 10px;
border-radius: 5px;
border: none;
background-color: #007bff; /* Blue button color */
color: #fff;
cursor: pointer;
}
/* Message bubble styling */
.message-bubble {
background-color: #007bff;
color: #fff;
border-radius: 10px;
padding: 10px;
margin-bottom: 5px;
max-width: 80%;
word-wrap: break-word;
}
.message-container {
display: flex;
justify-content: flex-end; /* Aligns sent messages to the right */
}
this is styles.css code which is used with html code for better view.
client.js
// client.js
document.addEventListener('DOMContentLoaded', () => {
const chatWindow = document.getElementById('chat-window');
const messageInput = document.getElementById('message-input');
const ws = new WebSocket('ws://localhost:3000');
// Event handler for incoming messages
ws.onmessage = event => {
const messageData = JSON.parse(event.data);
const { message, sender } = messageData;
if (sender !== 'self') {
appendMessage(message);
}
};
// Function to send a message
function sendMessage() {
const message = messageInput.value.trim();
if (message !== '') {
ws.send(JSON.stringify({ message }));
messageInput.value = '';
}
}
// Function to append a message to the chat window
function appendMessage(message) {
const messageElement = document.createElement('div');
messageElement.textContent = message;
messageElement.classList.add('message-bubble');
chatWindow.appendChild(messageElement);
chatWindow.scrollTop = chatWindow.scrollHeight;
}
});
These were all components of the frontend and the error it is giving as soon as we click the send button is
Uncaught ReferenceError: sendMessage is not defined at HTMLDocument.<anonymous> ((index):24:44)