Chatbox for website

[strawbs]

i'm trying to create a chatbox for our website but
when i try to register i get errors, YES I'VE BEEN TRYING HARD TO FIGURE THEM OUT

error:
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'value')
at registerBtn.onclick (script.js:1:780)

the js script i do have my api keys and everything else that goes with it,
i'm using firebase authentication as well.

// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();
const db = firebase.firestore();

const loginBtn = document.getElementById('loginBtn');
const registerBtn = document.getElementById('registerBtn');
const sendMessage = document.getElementById('sendMessage');
const logoutBtn = document.getElementById('logoutBtn');
const chatContainer = document.getElementById('chat-container');
const authContainer = document.getElementById('auth-container');

// User login function
loginBtn.onclick = async () => {
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;
    try {
        await auth.signInWithEmailAndPassword(username, password);
        authContainer.style.display = 'none';
        chatContainer.style.display = 'block';
        loadMessages();
    } catch (error) {
        alert(error.message);
    }
};

// User registration function
registerBtn.onclick = async () => {
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;
    try {
        await auth.createUserWithEmailAndPassword(username, password); // Use username in place of email
        alert('User registered successfully!');
    } catch (error) {
        alert(error.message);
    }
};

// Send message function
sendMessage.onclick = async () => {
    const msg = document.getElementById('messageInput').value;
    const user = auth.currentUser;
    if (user) {
        await db.collection('messages').add({
            username: user.email,
            message: msg,
            timestamp: firebase.firestore.FieldValue.serverTimestamp()
        });
        document.getElementById('messageInput').value = '';
    }
};

// Logout function
logoutBtn.onclick = () => {
    auth.signOut();
    authContainer.style.display = 'block';
    chatContainer.style.display = 'none';
};

// Load messages function
const loadMessages = () => {
    db.collection('messages').orderBy('timestamp')
        .onSnapshot(snapshot => {
            const messagesDiv = document.getElementById('messages');
            messagesDiv.innerHTML = '';
            snapshot.forEach(doc => {
                const data = doc.data();
                messagesDiv.innerHTML += `<p><strong>${data.username}:</strong> ${data.message}</p>`;
            });
        });
};

// Check authentication state
auth.onAuthStateChanged(user => {
    if (user) {
        authContainer.style.display = 'none';
        chatContainer.style.display = 'block';
        loadMessages();
    } else {
        authContainer.style.display = 'block';
        chatContainer.style.display = 'none';
    }
});

 

[VBService]

The error probably occurs because document.getElementById('username') or document.getElementById('password')
returns null, which means that elements with ids 'username' or 'password' do not exist in the HTML at the time the script is executed.