Zmiana wartości zmiennych globalnych za pomocą event listenera

let userEmail = '';
let userName = '';

credentialsForm.addEventListener('submit', e => {
  e.preventDefault();
  userEmail = credentialsForm.email.value;
  userName = credentialsForm.username.value;
})

console.log(userEmail, userName);

W jaki sposób mogę zmienić wartość zmiennych globalnych za pomocą event listenera?

Przecież zmieniasz wartość tylko po prostu nie wyświetlasz w konsoli nowej wartości, bo kod odpowiedzialny za wyświetlanie wykona się zanim wyślesz formularz.

@kAzek: Generalnie chodzi mi żeby przekazać te wartości jako argumenty tworząc obiekt poza tą funkcją.
Obiekt tworzy nową kolekcję w firestore, ale wykorzystując event listenera nic się nie dzieje..

let userEmail = 'none';
let userName = 'none';

credentialsForm.addEventListener('submit', e => {
  e.preventDefault();
  userEmail = credentialsForm.email.value;
  userName = credentialsForm.username.value;
})
  
const chatroom = new ChatRoom(userEmail, userName)

Tworzysz instancję ChatRoom przy ładowaniu skryptu, a EventListener wykonuje się później, więc z twojej perspektywy nic się nie dzieje. Zainicjalizuj zmienną chatroom bez wartości i w event listenerze stwórz instancję i do niej przypisz.

@Jan Osienjed: @kAzek, @szafran98

Mój 'genialny' plan zakładał utworzenie nowej instancji ChatRoom poza credentialsForm.addEventListener, żebym mógł z niej swobodnie korzystać w innych funkcjach, np w enterMessageForm.addEventListener -> chatroom.addMessage(newMessgage). Kiedy stworze ten obiekt wpisując wartość argumentów bezpośrednio wszystko działa. Kiedy chcę przekazać te wartości za pomocą event listenera nic się nie dzieje. Jako początkujący leszcz nie wiem czy rozwiązanie tego problemu jest banalne czy wręcz przeciwnie, nie da się tego zrobić w ten sposób. Będę bardzo wdzięczny za jakąkolwiek pomoc.

let userEmail;
let userName;

credentialsForm.addEventListener('submit', e => {
  e.preventDefault();
  userEmail = credentialsForm.email.value;
  userName = credentialsForm.username.value;
})

enterMessageForm.addEventListener('submit', e => {
  e.preventDefault();
  const newMessgage = enterMessageForm.message.value;
  chatroom.addMessage(newMessgage);
});

let chatroom = new ChatRoom(userEmail, userName);

const chatUI = new ChatUI(chatList);
chatroom.getChats(chat => chatUI.render(chat));

A jak zrobisz chatroom = new ChatRoom(userEmail, userName); w event listenerze, to nie będziesz mógł z niej korzystać w innych funkcjach?

@szafran98: NIe, wtedy dostaję TypeError: Cannot read property 'AddChat' of undefined

Nie wiem o co chodzi tylko podejrzewam, ze jakiś czat i teraz taka sprawa nie możesz go stworzyć jako anonimowy (choćby tylko podgląd bez możliwości wysyłania wiadomości) a gdy użytkownik podaje dane (wysyła formularz z danymi) ustawić użytkownika ewentualnie stworzyć nową instancję ChatRoom dla podanego użytkownika?

@Jan Osienjed: @kAzek: Póki co chciałbym zrozumieć dlaczego to rozwiązanie nie działa. Ktoś mądry pilnie poszukiwany.

Bo ty modyfikujesz zmienne userMail i userName. chatRoom sie w ogole nie zmienia. Nie zmieniaja sie tez skladowe wewnatrz chatRoom.

No jak dlaczego nie działa jak pisałem kod w EventListener wykonuje się dopiero przy wysyłaniu formularza a ten pod nim tworzący ChatRoom zaraz po załadowaniu strony.

credentialsForm.addEventListener('submit', e => {
  e.preventDefault();
  userEmail = credentialsForm.email.value;
  userName = credentialsForm.username.value;
  
  chatroom.userEmail =  userEmail; //nie ma przypadkiem tak (lub podobnie) tego przypisać?
  chatroom.userName =  userName;
});

Aby coś konkretnego napisać trzeba by wiedzieć co to jest ten ChatRoom to jakieś gotowe rozwiązanie? Jeżeli tak to jakie i chyba ma jakąś dokumentację i tam można sprawdzić jak to się robi.

@kAzek: ```

ChatRoom tworzy nową kolekcję w firestore

class ChatRoom {
  constructor(email, username) {
    this.email = email;
    this.username = username;
    this.created_at = firebase.firestore.Timestamp.fromDate(new Date());

    const usersRef = db.collection(email).doc(username);
    usersRef.get().then((docSnapshot) => {
      if (!docSnapshot.exists) {
        this.room = db.collection(email).doc(this.username).set({message: `${this.username} joined chat`, created_at: this.created_at});
      }
    });

    this.room = db.collection(email);
  }

  async AddMessage(message) {
    const now = new Date();
    const chat = {
      message,
      username: this.username,
      created_at: firebase.firestore.Timestamp.fromDate(now)
    };

    const response = await this.room.add(chat);
    return response
  }
}

@kAzek: @stivens
Dzieki!