0

I'm trying to make an Electron app with an input, which value will be used for setting the app's progress bar via win.setProgressBar()

I tried to use ipc to send a message from the renderer process to the main process. I tried adding blur and click event listeners for the input, using a function defined above, but they don't seem to be applied correctly.

Renderer process :

const {ipcRenderer} = require("electron");

function setProgress(pgrss) {
    console.log("fromage"); // For debugging purposes
    ipcRenderer.send("sendMainMessage", {
        progress: pgrss
    });
};

document.getElementById("progress").addEventListener("click", setProgress(parseFloat(document.getElementById("progress").value)));

Input in HTML page :

<div class="pane">
    <input id="progress" type="number" value="0.5">
</div>

Loading the renderer JS in HTML page :

<script>
  require("electron-photon")
  require('./renderer.js')
</script>

Main process ipc receiver :

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

// ...

ipcMain.on("sendMainMessage", (event, properties) => {
  mainWindow.setProgressBar(properties.progress);
});

I except the app's progress bar to be set to the value I'm putting in the input field when the event on it happens, via the renderer process and ipc. According to devtools, it looks like the renderer process's function used for the event listener runs once at load, and the event listener isn't applied to the input field. Here's what shows in the console, doesn't depend on if something was typed in the input or not : https://i.stack.imgur.com/3Ca5j.png . And in the Event Listener tab for the input element, no event listener shows from the renderer script.

Locness
  • 58
  • 1
  • 8

2 Answers2

1

I believe I found my answer here : Input addEventListener on change not firing. the problem is that I am passing the addEventListener function the result of the setProgress() function.

As said in the link, I'll try .bind or a function statement/arrow function when I'll have time.

Locness
  • 58
  • 1
  • 8
  • 1
    While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes – slfan Dec 22 '19 at 15:49
  • 1
    To clarify for readers: the issue is that the second argument to `addEventListener` must be a function itself, NOT the _result_ of calling that function. i.e. it should be `addEventListener("click", someFunc)` instead of `addEventListener("click", someFunc())` (note the extra parentheses in the incorrect one). – tscizzle Jun 02 '21 at 17:16
0

I believe that the issue is that the event listener tries to attach before the DOM is fully loaded, leading to it attaching to nothing. You could load jquery into your project and use its default ready function to make sure the DOM exists before trying to attach a listener, or write something yourself. See: How to wait until an element exists? for further clarification.

RDJ
  • 28
  • 1
  • 5
  • There's no dinamically added elements, so I will try `window.onload` – Locness Aug 02 '19 at 08:41
  • I wrapped the code in a window.onload, and nope. Still no event. I will try with jQuery. – Locness Aug 02 '19 at 08:54
  • Imported jquery like this : ``` ``` And it isn't detected, with a ReferenceError $ is not defined in the console. Will try removing electron-photon. – Locness Aug 02 '19 at 08:54
  • Still no result after removing electron-photon. – Locness Aug 02 '19 at 09:05
  • 1
    @Locness To use jQuery in Electron code, you need to install it as a node module and require it like that. So run the npm install for jquery and use `const $ = require('jquery');` – RDJ Aug 07 '19 at 01:27
  • Ah yes, that works. Though I still can't do what I wanted to do. Will try other things. – Locness Aug 07 '19 at 10:40
  • Hey, I believe I found an answer : https://stackoverflow.com/questions/50683026/input-addeventlistener-on-change-not-firing – Locness Dec 22 '19 at 15:29