0

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.

1 Answers1

0

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>
Pelayo Méndez
  • 389
  • 4
  • 10
  • I tried this. And now i'm just getting the "Uncaught TypeError: Cannot read property 'addEventListener' of null". It's like the JS can't read the HTML properly. – Mads Ahlquist Jensen Apr 08 '19 at 16:34
  • I just realized that i'm also getting some errors in the console log of the main process: "Uncaught (in promise) Error: Could not instantiate: ProductRegistryImpl.Registry", source: chrome-devtools://devtools/bundled/shell.js (108) – Mads Ahlquist Jensen Apr 08 '19 at 16:44
  • I'm not sure the second error is not related to your debug tools. Can you post how are you linking the javascript code to the HTML? – Pelayo Méndez Apr 08 '19 at 22:05
  • I'm linking the JS in the top of the HTML head – Mads Ahlquist Jensen Apr 09 '19 at 07:30
  • Try linking it at the bottom of your document. After the HTML tags that you are trying to access so it will be loaded after them. – Pelayo Méndez Apr 09 '19 at 09:50
  • 1
    @MadsAhlquistJensen That second error you quoted, has nothing to do with your application and does not affect its operation. I get it all the time in Electron too, it is a fault in the Developer Tools bubbling up. – Armen Michaeli Apr 09 '19 at 09:55