admin管理员组

文章数量:1426652

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)```
  • javascript
  • node.js
  • electron
Share Improve this question asked Jul 23, 2019 at 2:41 epiphan mushahwarepiphan mushahwar 231 gold badge1 silver badge4 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 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?

本文标签： javascriptAdding an click event listener to an element in an electron appStack Overflow

版权声明：本文标题：javascript - Adding an click event listener to an element in an electron app - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745471063a2659750.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。