Error: document is not defined when starting up the electron app
I'm trying to make it so when someone clicks on a p element a function in my js file for running the electron stuff opens a new electron window but it keeps saying that document is not defined.
this is my index.html (main electron app file)
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DTE</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.sound.min.js"></script>
<script type="text/javascript" src="Entery.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body style="margin: 0px; background-color: black">
<div style="position: absolute; bottom: 39px;width: 100vw; height: 1px; background-color:white;"></div>
<p id="commands" onclick="displayCommands()" style="position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%);font-family: 'Roboto'; color: white;font-weight: 300;">Commands</p>
</body>
this is my js file for electron
const electron = require('electron');
const url = require('url');
const path = require('path');
const { app, BrowserWindow, Menu } = electron;
let mainWindow;
let commandWindow;
app.on('ready', () => {
mainWindow = new BrowserWindow();
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}));
Menu.setApplicationMenu(null);
document.querySelector('#commands').addEventListener('click', () => {
displayCommands();
})
});
displayCommands = () => {
commandWindow = new BrowserWindow({
width: 300,
height: 500,
title: 'Avaliable Commands',
});
commandWindow.loadURL(url.format({
pathname: path.join(__dirname, 'commands.html'),
protocol: 'file:',
slashes: true
}));
}
It pops up an error each time I run it saying this:
ReferenceError: document is not defined
at App.<anonymous> (DIRECTORY_TO_ENTERY.JS:25:5)
at App.emit (events.js:199:15)```
