Newby: index.js file doesn't work in index.html file

Question

I'm new in Javascript world, currently I'm trying to implement a GUI using electron js framework. 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!!); 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. Here I'm reporting the code from 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:

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:

I used 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;
I tried console.log("In index.js"); in index.js but still it is not working !

From these results I thought the problem may be the .html and .js file communication; 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.

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.

Answer 1

It appears that you shoud be using electron to load the index.html via BrowserWindow once it is ready. app and BrowserWindow are from the electron module.

`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. You can wait for this event by using the app.whenReady() API. Call createWindow() after whenReady() resolves its Promise.

For futher info see https://www.electronjs.org/docs/tutorial/quick-start

Hope this proves useful.

Newby: index.js file doesn't work in index.html file

Question

1 answers

solution1
-1 2021-07-27 15:25:44

Newby: index.js file doesn't work in index.html file

Question

1 answers

solution1 -1 2021-07-27 15:25:44

solution1
-1 2021-07-27 15:25:44