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';
    }
});