I’m trying to import a function from a javascript file into my html document, but I cant get it working

I usually work with C# so im pretty new to Javascript. What im trying to do is link each of my functions that are contained within a Javascript file “commands.js” to buttons that are within my html template.

so far I have used a script tag within the head tag to import the commands.js file:

<script src="js/commands.js"></script>

I have then used a div container and used the onclick function to try access the “login()” function inside of the commands.js file, but nothings showing in the console. At this point im just testing the functions to ensure that each of them are responding to the buttons.

 <div id="btnlogin"  class="standard-button" onclick="login()" onmouseenter="hoverMouseOver(event)" onmouseleave="hoverMouseLeave(event)">
        <img src="img/logon.svg" height="100%" width="100%">
        <span class="tooltiptext">Log on</span>  
               
      </div>   

Login function inside of the commands.js file:

alert("hello");
var login = document.getElementById('btnlogin')
login.addEventListener('click', () => {
var data = {RemoteDN: remoteDN};
//var postData = new Login(RemoteDN)
JSON.stringify(data);


const request = net.request({
  method: 'POST',
  protocol: 'https:',
  hostname:  'fir.nd.local',
  port: 443,
  path: `${baseUrl}login`,
  headers: {
  'Content-Type': 'application/json',
  'Content-Length': data.length
}
  });
  request.on('response', (response) => {
console.log(`STATUS: ${response.statusCode}`);
console.log(`HEADERS: ${JSON.stringify(response.headers)}`);
response.on('data', (chunk) => {
  console.log(`BODY:${chunk}`);
})
response.on('finish', () =>{
  console.log("Request has finished")
})
response.on('end', () => {
  console.log('No more data in response.')
});
response.on('error', (error) =>{
console.log("Error has occured")
})

});

request.write(data);
request.end();

});

The alert message doesn’t even pop up when the login button is clicked. However when I include this javascript code within the html document itself, the alert function is triggered. I don’t want to do this however, as I have a lot of different functions that need to be assigned to each button and i want to keep all of the JS code seperate.

Can anyone give me some advice as to why im unable to access these individual functions from another JS file.

Thanks!