Electron can't seem to find my function when using onclick

Question

The problem

I'm creating an app for live chatting as a project for my exam. Everything has been working great up until now. For some reason electron isn't able to find functions even though the functions clearly are in my code.

The code

/*
  * login()
  */

 async function login() {

   var userName = document.getElementsByName("userName");
   var password = document.getElementsByName("password");

   if(validateForm('login')) {
     var sql     = "SELECT * FROM db.users WHERE ?? = ?";
     var inserts = ["userName", userName];
     sql         = mysql.format(sql, inserts);

     connResult = await conn(sql);

     var dbUsername;
     var dbPassword;
     var autologin;

     if(connResult === 'resolved') {
       dbUserName = result[0]["userName"];
       dbPassword = result[0]["password"];
     } else {
       console.log(connResult);
     }

     if(document.getElementsByName("autoLogin").checked) {
       autoLogin = true;
     } else {
       autoLogin = false;
     }

     if(verifyUser(userName, password, dbUserName, dbPassword)) {
       storeUser(connResult, autoLogin);
       if(await fetchUserData(userName)) {
         mainProcess.createMain();

         window = remote.getCurrentWindow

         window.close();
       }
     }
   }
 };

 /*
  * verifyUser()
  */

 function verifyUser(userName, password, dbUserName, dbPassword) {

   if(compare(dbUserName, userName)){
     console.log("UserName exists");

     if(compare(dbPassword, password)) {
       console.log("password exists");
       return true;

     } else {
       console.log("Wrong password");
       document.getElementById("formWarning").innerHTML
       return false;

     }
   } else {
     console.log("userName doesn't exist");
     return false;

   }
 };

Here's the HTML:

<button id="loginButton" onclick="login()" class="buttonMedium">Login</button>

I'm getting the following error when running the function login() via onclick:

"Uncaught TypeError: login is not a function"

And when i type login() into my dev console:

"Uncaught (in promise) TypeError: Cannot read property 'placeholder' of undefined"

I also get the last error because the documents can't "communicate". It is trying to access a form in my html and it can't read the placeholder for some reason.

As i mentioned everything worked before. I have no idea where this went wrong. Hope that you guys can help me.

Answer 1

Requiring a script means it has it's own context. Asuming your code is in a script required at the bottom of your html file:

<script>
      require('./index.js')
</script>

Assing the function to the button like this:

document.getElementById('loginButton').addEventListener('click', login);

After that remember you also don't need the "onclick" property on your HTML:

<button id="loginButton" class="buttonMedium">Login</button>