电子模态javascript按钮不起作用答案

【问题标题】：Electron modal javascript button not working电子模态javascript按钮不起作用
【发布时间】：2020-05-11 02:25:49
【问题描述】：

我正在学习使用电子创建应用程序。到目前为止，我在主进程上运行了一个main.js 文件，然后我的index.html 页面有一个index.js，我有一个使用add.js 文件的模态弹出窗口add.html。我的add.html 文件中有两个按钮，无论我使用什么方法，我都无法让它们中的任何一个工作。我尝试使用以下方法来使用按钮：

HTML：

<!DOCTYPE html>
<html lang="en">
<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>Add Room</title>

    <!-- <link rel="stylesheet" href="../assets/css/main.css"> -->
    <link rel="stylesheet" href="../assets/css/add.css">
</head>
<body>
    <!-- <p class="name">Address: </p> -->

    <div class="row">
        <div class="address">
            <input class="nameVal" placeholder="Address">
        </div>
        <div>
            <button class="add"> Add </button>
            <button id="cancelBtn" class="cancel" onclick="cancelButton">Cancel</button>
        </div>
    </div>

    <!-- <a id="close">Close</a> -->
    <script  src="./add.js"></script>
</body>
</html>

Javascript：

const electron = require('electron');
const path = require('path');
const BrowserWindow = electron.remote.BrowserWindow;
const currWindow = electron.remote.getCurrentWindow();
const ipc = require('electron').ipcRenderer;

let cancelBtn = document.getElementById('cancelBtn');
var $ = document.querySelectorAll.bind(document);
//This method is used in index.js and it works perfectly.
$(".cancel").forEach(function (el) {
    el.addEventListener("click", function() {
        alert("this thing is doinh stuuffff");
    });
});

cancelBtn.addEventListener("click", function() {
    alert("this thing is doing stufff");
});

function cancelButton() {
    alert("this thing is using the onclick property");
}

我知道我的 html 链接到我的 javascript，因为如果我在不使用按钮的情况下让 javascript 弹出警报，它就可以工作。

我看过其他有类似问题的帖子，但他们的问题已得到解决，因为他们有一个错字。在几天的时间里，我多次重新编写和重新阅读我的代码，所以我怀疑问题是由于错字造成的。

add.html 用作模态窗口，所以我可能缺少一些关于模态窗口的规则？但它是从main.js 使用icp 调用的，它工作正常：

ipc.on('open-add-room-window', () => {
  var addRoom = new BrowserWindow({parent: win, modal: true, width: 300, height: 150, resizable: false, show: false});
  addRoom.loadFile("src/add.html");
  addRoom.on('close', () => { addRoom = null; });
  addRoom.once('ready-to-show', () => {
    addRoom.show();
  });
});

【问题讨论】：

console 中的任何错误？ cancelBtn 不是 undefined 吗？
嘿嘿，你在创建 browserWindow 的时候启用了 nodeIntegration 吗？
@MoshFeu 没有弹出错误，所以应该定义按钮。
@tpikachu 是的，节点集成已启用。
你在使用 jQuery？

标签： javascript html electron

【解决方案1】：

感谢@tpikachu，我能够通过使用以下代码在我的模态BrowserWindow 上启用nodeIntegration 来解决问题：

var addRoom = new BrowserWindow({webPreferences: {nodeIntegration: true}, parent: win, modal: true, width: 300, height: 150, resizable: false, show: false});

【讨论】：