Can someone tell me why im unable to load Javascript files into separate html file?-CodePudding

Im currently making an electron application. i have an index.html file where ive loaded in Javascript files within the head tag. I am able to access the JS functions without any issues.

I've now created a separate browser window, and for this I've made another html file. When I attempt to load in another JavaScript file it doesn't allow me to access any of the functions. What's weird is that i can load in the CSS file no problem that works. Why is it so much hassle to load in a JS sheet, I've been trying to figure it out for 2 days now :/

I've also attempted to use module.exports in my sidebar.js file so that I can try and trigger the functions using the renderer.js file and the main.js file but it gives me an error saying "document has not been defined"

Can anyone think of a solution? its probably something simple but I'm honestly losing it here.

sidebar.js file:

 const { BrowserWindow } = require("electron/main");
 document.addEventListener('DOMContentLoaded', () => {

 function Alert()
 {
   window.alert('hello')
 }
 function moveIconsLeft() // trying to trigger this function here  
 {
  document.getElementById('btnReady').style.animation = "stateoverlayclose 0.45s ease 0s 
  1"
 }
 module.exports = { moveIconsLeft }

 });

Html file:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="sidebar.css">
<script type="module" src="commands.js"></script>
<script src="sidebar.js"></script>


<title>Document</title>
</head>
<body>

<div >
<div >  
  <div style="display: grid; grid-template-columns: repeat(8,1fr); margin-left:-20px;  width:100px; text-align: center; color:#FFFFFF; height:60px;">
    <div id="btnReady"  onclick="moveIconsLeft()" ><img src="" height="100%" width="100%"><span >Ready</span></div>
    <div id="btnNotReady"  onclick="" ><img src="" height="100%" width="100%"><span >Not Ready</span></div>
    <div id="btnBreak"  onclick="moveIconsLeft() "><img src="" height="100%" width="100%"><span >Break</span></div>
    <div id="btnEmail"  onclick=""><img src="" height="100%" width="100%"><span >Email</span></div>
    <div id="btnLunch"  onclick=""><img src="" height="100%" width="100%"><span >Lunch</span></div>
    <div id="btnComfortBreak"  onclick=""><img src="" height="100%" width="100%"><span >Comfort Break</span></div>
    <div id="btnMeeting"  onclick=""><img src="" height="100%" width="100%"><span >Meeting</span></div>
    <div id="btnChat"  onclick=""><img src="" height="100%" width="100%"><span >Web Chat</span></div>
  </div>

 </div>
 </div>
 </body>
 </html>

CSS code:

@keyframes stateoverlayclose {
from { opacity: 1; left: 10;}
to {opacity: 0; left: -700px;}
}

Renderer.js

const Ready = document.getElementById('btnReady')
Ready.addEventListener('click', function(){
ipcRenderer.sendSync("Ready")
});

index.js

const { moveIconsLeft } = require("./sidebar")

ipcRenderer('Ready', (event, data) => {
moveIconsLeft()
event.returnValue = "ready test";

})

Anyone help would be much appreciated!

CodePudding user response：

Try putting the script tags at the end, right before the end body tag.

CodePudding user response：

Try adding <script module src="sidebar.js"></script>
Or may be you can check that the file name is proper sidebar.js. Just check it once!