So, I'm making a chat website where you have to choose an username to be able to talk. By default, the input box to send messages is disabled (with the disabled attribute). I want my script to remove this attribute so that it becomes enabled ONLY when a user chosen a username. Now, I'm sure its a simple thing to fix but I really don't know a lot about JavaScript so that's quite difficult for me to find the problem. Here is the code:
// Get references to the form elements
const usernameForm = document.getElementById('username-form');
const usernameInput = document.getElementById('username-input');
const messageForm = document.getElementById('message-form');
const messageInput = document.getElementById('message-input');
const sendButton = document.getElementById('send-button');
const chatWindow = document.getElementById('chat-window');
let username = ''; // Store the chosen username
// Handle the submit event for the username form
usernameForm.addEventListener('submit', (event) => {
// Prevent the form from refreshing the page
event.preventDefault();
// Get the value of the username input
username = usernameInput.value;
// Clear the input
usernameInput.value = '';
// Hide the username form and show the message form
usernameForm.style.display = 'none';
messageForm.style.display = 'flex';
});
// Handle the submit event for the message form
messageForm.addEventListener('submit', (event) => {
// Prevent the form from refreshing the page
event.preventDefault();
// Get the value of the message input
const message = messageInput.value;
// Clear the input
messageInput.value = '';
// Add the message to the chat window
chatWindow.innerHTML = `<p><strong>${username}:</strong> ${message}</p>`;
// Scroll the chat window to the bottom
chatWindow.scrollTop = chatWindow.scrollHeight;
// Check if the username has been set
if (username === '') {
// If the username has not been set, show an error message
alert('You must choose a username before sending a message');
return;
}
// Check if a username has been chosen
if (username !== '') {
// If a username has been chosen, remove the disabled attribute from the message input and send button
messageInput.removeAttribute('disabled');
sendButton.removeAttribute('disabled');
}
}); /* Add some basic styling for the chat window */
#chat-window {
width: 100%;
height: 550px;
border: 1px solid black;
overflow-y: scroll;
}
#message-form {
display: flex;
align-items: center;
}
#message-input {
flex-grow: 1;
margin-right: 10px;
height: 30px;
font-size: 16px;
}
#send-button {
height: 35px;
font-size: 16px;
}<html>
<body>
<!-- Add a form for the user to enter their username -->
<form id="username-form">
<label for="username-input">Choose a username:</label>
<input type="text" id="username-input"/>
<button type="submit">Submit</button>
</form>
<!-- Add a chat window to display the messages -->
<div id="chat-window"></div>
<!-- Add a form for the user to enter and send messages -->
<form id="message-form">
<input type="text" id="message-input" disabled/>
<button type="submit" id="send-button" disabled>Send</button>
</form>
</body>
</html>in the Java script and I also tried to find an alternative.
CodePudding user response：
You've simply attached the relevant event listener to the wrong form - to the "messageForm" rather than the "usernameForm". I've just made this one change below and now it seems to work as intended.
(Although you probably want to tidy it up as you now have two separate submit event handlers for that one form - there's nothing wrong with that but it's probably more readable when it's all inside a single handler function.)
// Get references to the form elements
const usernameForm = document.getElementById('username-form');
const usernameInput = document.getElementById('username-input');
const messageForm = document.getElementById('message-form');
const messageInput = document.getElementById('message-input');
const sendButton = document.getElementById('send-button');
const chatWindow = document.getElementById('chat-window');
let username = ''; // Store the chosen username
// Handle the submit event for the username form
usernameForm.addEventListener('submit', (event) => {
// Prevent the form from refreshing the page
event.preventDefault();
// Get the value of the username input
username = usernameInput.value;
// Clear the input
usernameInput.value = '';
// Hide the username form and show the message form
usernameForm.style.display = 'none';
messageForm.style.display = 'flex';
});
// Handle the submit event for the message form
usernameForm.addEventListener('submit', (event) => {
// Prevent the form from refreshing the page
event.preventDefault();
// Get the value of the message input
const message = messageInput.value;
// Clear the input
messageInput.value = '';
// Add the message to the chat window
chatWindow.innerHTML = `<p><strong>${username}:</strong> ${message}</p>`;
// Scroll the chat window to the bottom
chatWindow.scrollTop = chatWindow.scrollHeight;
// Check if the username has been set
if (username === '') {
// If the username has not been set, show an error message
alert('You must choose a username before sending a message');
return;
}
// Check if a username has been chosen
if (username !== '') {
// If a username has been chosen, remove the disabled attribute from the message input and send button
messageInput.removeAttribute('disabled');
sendButton.removeAttribute('disabled');
}
});/* Add some basic styling for the chat window */
#chat-window {
width: 100%;
height: 550px;
border: 1px solid black;
overflow-y: scroll;
}
#message-form {
display: flex;
align-items: center;
}
#message-input {
flex-grow: 1;
margin-right: 10px;
height: 30px;
font-size: 16px;
}
#send-button {
height: 35px;
font-size: 16px;
}<html>
<body>
<!-- Add a form for the user to enter their username -->
<form id="username-form">
<label for="username-input">Choose a username:</label>
<input type="text" id="username-input"/>
<button type="submit">Submit</button>
</form>
<!-- Add a chat window to display the messages -->
<div id="chat-window"></div>
<!-- Add a form for the user to enter and send messages -->
<form id="message-form">
<input type="text" id="message-input" disabled/>
<button type="submit" id="send-button" disabled>Send</button>
</form>
</body>
</html>CodePudding user response：
Instead of
messageInput.removeAttribute('disabled');
sendButton.removeAttribute('disabled');
You can use
messageInput.disabled = false;
sendButton.disabled = false;