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=".0.0/jquery.min.js"></script>
<script type="text/javascript" src=".js/0.8.0/p5.min.js"></script>
<script type="text/javascript" src=".js/0.8.0/addons/p5.dom.min.js"></script>
<script type="text/javascript" src=".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="mands" 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 mandWindow;
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('#mands').addEventListener('click', () => {
displayCommands();
})
});
displayCommands = () => {
mandWindow = new BrowserWindow({
width: 300,
height: 500,
title: 'Avaliable Commands',
});
mandWindow.loadURL(url.format({
pathname: path.join(__dirname, 'mands.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)```
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./ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare./ajax/libs/p5.js/0.8.0/p5.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare./ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare./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="mands" 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 mandWindow;
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('#mands').addEventListener('click', () => {
displayCommands();
})
});
displayCommands = () => {
mandWindow = new BrowserWindow({
width: 300,
height: 500,
title: 'Avaliable Commands',
});
mandWindow.loadURL(url.format({
pathname: path.join(__dirname, 'mands.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)```
1 Answer
Reset to default 1You can't access DOM (document) in your main process of electron, only in the renderer that it belongs to. Read this for more information How to access DOM elements in electron?