Newby：index.js 文件在 index.html 文件中不起作用

Question

I'm new in Javascript world, currently I'm trying to implement a GUI using electron js framework.我是 Javascript 世界的新手，目前我正在尝试使用电子 js 框架实现 GUI。 Trying to reproduce the code from a tutorial, I got stuck on a code which seems not to work on my PC, basically even if I click on a button, the console is not logging anything (when it should have!!);尝试从教程中重现代码时，我遇到了一个似乎无法在我的 PC 上运行的代码，基本上即使我单击一个按钮，控制台也没有记录任何内容（应该有的时候！！）； the aim of the code is to refer to a button defined in an index.html file from a index.js containing the script and log a sentence when the button is clicked, but it seems like the script in the html file cannot access the .js file at all.代码的目的是从包含脚本的index.js中引用index.html文件中定义的按钮，并在单击按钮时记录一个句子，但似乎 html 文件中的脚本无法访问 . js 文件。 Here I'm reporting the code from index.html :我在这里报告index.html的代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>my-app</title>
<link rel = "stylesheet" href="styles.css">
</head>
<body>
<button id = "button1" > START </button>
<script>
    require('./index.js'); 
</script>
</body>
</html>

Here the code belonging to index.js file:这里属于index.js文件的代码：

const electron = require("electron");
const button1 = document.getElementById("button1");

button1.addEventListener("click", startApp);

function startApp(){
    console.log("Button clicked!");
  
};

Note: I've tried to debug this code based on my very little knowledge of Javascript and electron:注意：我尝试根据我对 Javascript 和电子的很少知识来调试此代码：

I used document.getElementById("button1");我使用了document.getElementById("button1"); in index.html and it does work (the variable obtained was used to change button text color), but the same is not working when reported in the index.js file;在index.html它确实有效（获得的变量用于更改按钮文本颜色），但在index.js文件中报告时同样无效；
I tried console.log("In index.js");我试过console.log("In index.js"); in index.js but still it is not working !在index.js但仍然无法正常工作！

From these results I thought the problem may be the .html and .js file communication;从这些结果我认为问题可能是 .html 和 .js 文件通信； they are in the same folder.它们在同一个文件夹中。 One more thing: I downloaded the tutorial code from GitHub and the problem is still present with the same actions at points 1 and 2.还有一件事：我从 GitHub 下载了教程代码，但问题仍然存在，第 1 点和第 2 点的操作相同。

Edit : I've omitted that I'm linking index.html window and displaying it in the main.js file, in fact the windows does show up, but the the click on the button doesn't produce any action.编辑：我省略了我正在链接index.html窗口并将其显示在main.js文件中，实际上窗口确实显示了，但是单击按钮不会产生任何操作。

Answer 1

It appears that you shoud be using electron to load the index.html via BrowserWindow once it is ready.一旦准备就绪，您似乎应该使用电子通过BrowserWindow加载 index.html 。 app and BrowserWindow are from the electron module. app和BrowserWindow来自电子模块。

`const { app, BrowserWindow } = require('electron')`

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()
})

From the quick start从快速开始

In Electron, browser windows can only be created after the app module's ready event is fired.在 Electron 中，浏览器窗口只能在 app 模块的 ready 事件被触发后创建。 You can wait for this event by using the app.whenReady() API.您可以使用 app.whenReady() API 等待此事件。 Call createWindow() after whenReady() resolves its Promise.在 whenReady() 解析其 Promise 之后调用 createWindow()。

For futher info see https://www.electronjs.org/docs/tutorial/quick-start有关更多信息，请参阅https://www.electronjs.org/docs/tutorial/quick-start

Hope this proves useful.希望这证明是有用的。

Newby：index.js 文件在 index.html 文件中不起作用

问题描述

1 个解决方案

解决方案1
-1 2021-07-27 15:25:44

Newby：index.js 文件在 index.html 文件中不起作用

问题描述

1 个解决方案

解决方案1 -1 2021-07-27 15:25:44

解决方案1
-1 2021-07-27 15:25:44