CODEWITHSUNDEEP
javascriptnode.jselectron
epiphan mushahwar
epiphan mushahwar

Reputation: 23

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

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

Upvotes: 2

Views: 13744

Answers (1)

Tien Duong
Tien Duong

Reputation: 2595

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?

Upvotes: 1

Related Questions