In my Electron app renderer.js, I want to create a popup modal, which loads its own modal.html. How do I access DOM elements sitting in this modal.html? Using the usual document.getElementById() is not working. In the code below, alert(modalButton) displays null, even though at that point, the modal has already been fully loaded.
renderer.js
const formModal = () => {
let popupModal = new remote.BrowserWindow({
parent: remote.getCurrentWindow(),
modal: true,
center: true,
backgroundColor: modalBkgrdColor,
frame: false,
show: false
});
popupModal.setMenu(null);
popupModal.loadFile('app/modal.html');
popupModal.once('ready-to-show', () => {
popupModal.show();
});
}
const toggleButton = document.getElementById('toggle-button');
toggleButton.addEventListener("click", () => {
formModal();
let modalButton = document.getElementById('modal-button')
alert(modalButton);
})
modal.html
...
<button id="modal-button">Modal</button>
...