Skip to content

Javascript click event doesnt accept two same function

I want to use joinLobby(‘create’) and joinLobby(‘join’) functions in one page. But when I reload the page, joinLobby function working instantly. How can I prevent instant work?

let element = document.getElementById("btn_create").addEventListener('onclick', joinLobby('create'))

let element2 = document.getElementById("btn_join").addEventListener('onclick', joinLobby('join'))

function joinLobby(pref) {
    //do something
    }

Answer

Just having the functions like that runs them instantly. Try something like this:

let element = document.getElementById("btn_create").addEventListener('click', () => {
  joinLobby('create');
});

let element2 = document.getElementById("btn_join").addEventListener('click', () => {
  joinLobby('join')
});

function joinLobby(pref) {
  alert(pref);
}
<input type="button" id="btn_create" value="Create" />
<input type="button" id="btn_join" value="Join" />