CODEWITHSUNDEEP
javascriptnode.jselectron
Tristan Tran
Tristan Tran

Reputation: 1513

addEventListener on click

I have a button defined as following

In index.html:

<body>
  <section>
    <button id="open-file">Open File</button>
    ...(series of other similar buttons)...

  </section>
</body>

<script>
    require('./renderer');
</script>

In renderer.js:

const openFileButton = document.querySelector('#open-file');
...

openFileButton.addEventListener('click', () => {
  console.log('You clicked the "Open File" button.');
});

In main.js:

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    show: false,
    webPreferences: {
        nodeIntegration: true
    }
  });
  mainWindow.loadFile('app/index.html');
  ...
});

When I click on that button in the app window, nothing happens in the console. Are there any extra steps I need to add to execute this event listener?

Upvotes: 0

Views: 918

Answers (2)

osynkad
osynkad

Reputation: 11

Have you tried <script src="./renderer.js"></script>? Are you sure your renderer.js runs as intended?

Just to clarify, require() doesn't exist in client-side JavaScript. Open your browsers developer console and you should see that require() isn't defined.

Take a look at MDN script tag documentation for more information how you can include your .js files.

Upvotes: 1

user14520680
user14520680

Reputation:

In your HTML file, you're using require in your script tag which is a Node.js specific function. Based on what you're expecting, it looks like you would like to link renderer.js to your HTML file. Therefore, link it directly by entering <script src="renderer.js"></script>.

Upvotes: 1

Related Questions