Adding an click event listener to an element in an electron app

Question

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)```

Tien Duong · Accepted Answer · 2019-07-23 02:45:44Z

1

You 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?

answered Jul 23, 2019 at 2:45

Tien Duong

2,6051 gold badge12 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

epiphan mushahwar Over a year ago

Thanks a lot, I'll look into it and come back if I mess it up again😅

Collectives™ on Stack Overflow

Adding an click event listener to an element in an electron app

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related