Electron app experiencing unresponsive textarea during event changes

In my electron application, I have the following code setup. It all starts with:

app.on('ready', createWindow);

function createWindow() {
  window.loadURL(url.format({
    pathname: path.join(__dirname, 'technical/views/highlightRules.html'),
    protocol: 'file:',
    slashes: true
  }));
}

The content of my highlightRules.html file includes:

<script type="text/javascript" src="../../ioadapters/controllers/HighlightRulesController.js"></script>

...

<textarea id="lowValueSettingText" rows="8"></textarea>

Lastly, the HighlightRulesController.js contains:

function setUp() {
  const lowValueSettingTextarea = document.getElementById("lowValueSettingText");

  lowValueSettingTextarea.onchange = function() {
    onLowValueHighlightSettingChanged();
  }
}

function onLowValueHighlightSettingChanged() {
  alert("test");
}

setUp();

After typing something in the textarea and losing focus, the expected alert does not show up. How can I resolve this issue?

Answer №1

After some investigation, I discovered the issue. The <script> tag in highlightRules.html was mistakenly placed in the head section.

Once I relocated it to the bottom of the body, everything started functioning properly.

Here is the correct placement for the script tag:

<body>
  ...

  <script type="text/javascript" src="../../ioadapters/controllers/HighlightRulesController.js"></script>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trigger the jQuery function based on the ID modification executed by jQuery

Is it possible to change the id of an HTML element using this function? $("#test").attr('id', 'test2'); Here is an example of the code: $("#test").click(function() { $("#test").attr('id', 'test2'); alert(& ...

Reveal a concealed div upon submitting an HTML form to display the resulting output

I have created an HTML form to gather information about a person's name and location. Once the user submits the form, I want the output to be displayed at the bottom of the page using PHP echo. My specific requirement is, To initially hide the outp ...

Glitch found in Safari involving innerText of elements

Hey everyone, I posted this question not too long ago but now I have some images to share regarding the issue with Safari. When checking the console in Safari, the following text is displayed: <div id="rot3posDisp" class="rotDisp">C</div> Ho ...

The "settings" injection was not located. The Vue composition API is encountering problems with providing and injecting

I'm encountering an issue while attempting to pass a reactive object using Vue's provide and inject method. I keep receiving the warning message [Vue warn]: injection "settings" not found. and when I try to log out settings, it shows up as undefi ...

What is the correct method for configuring access permissions?

I'm in the process of developing a user management system, but I keep finding myself having to check the user type for each router. router.get('/admin/settings', (req, res) => { if(admin) { //Proceed. } } router.get(&apo ...

How can one go about setting up express 4.x along with its middlewares?

What is the best way to install Express and retrieve its legacy version middlewares? Something similar to npm install -g, but specifically for reinstating the middleware, and why hasn't the Express team implemented this feature? ...

Reorganizing divisions with Dojo

I came across a thread on StackOverflow that was similar to what I'm looking for. jQuery removing an element and renumbering remaining elements However, since we don't use jQuery but instead rely on Dojo, I'm unsure how to achieve the same ...

To reveal the secret map location, just tap on the button - but remember, this only applies to

I am encountering an issue with duplicating a card and toggling the hidden location map. Currently, the location button only works for the first card and not for the rest. I need each card to independently open and hide the location map when clicked on the ...

Does NextJS come with an index.html template page pre-installed?

Today, I delved into NextJS for the first time as I transitioned a ReactJS website over to it. While I find it to be a powerful framework, there is one particular feature that seems to be missing. In traditional ReactJS (without the NextJS framework), we ...

Accessing data from localhost using Vue.js and Axios is restricted due to CORS policy and the error "Access to XMLHttpRequest" may be

Having a minor issue... Trying to retrieve a basic json file from my server for testing purposes (not an actual API). Utilizing VueJS and axios. Here is my code : getServicesAPI() { axios.get("http://51.91..../dist/API/Services.json").the ...

show the day of the week for a specific date saved in a MongoDB database

I need to create a report showing the total number of purchases for each day in the past week, formatted like this: { "sunday":30, "monday":20, ... } Each purchase in the database is structured as follows: { _id: 603fcb ...

Splitting up JavaScript and HTML within a WordPress environment

I recently came across a discussion on separating PHP code and HTML at this link I find myself in a similar predicament. My current project involves designing a WordPress website with numerous sliders, animated dropdowns, forms, and other components. The ...

In JavaScript, the checkboxes in all columns of a table with over 200 rows can be set, but only the checkboxes in the rows

Seeking help to implement toggle buttons for checkboxes on a page with a large table fetched from an external system. The table can have over 200 rows or more. Currently, I am facing an issue where I can only access and manipulate the visible checkboxes o ...

Leverage the Data API to retrieve the position value of the loading image

Perhaps this question seems silly, but it's really bothering me. So, I have a form where I can input 20 images (generated by a for loop). <?php for ($i=0; $i<20; $i++) { echo '<div class="col-xl-4 col-lg-4 col-md- ...

I. Discovering the Step-by-Step Guide on Retrieving User Information from Facebook Upon Generating App

I have set up a Facebook login for user registration on my website. However, I am only able to retrieve the profile name and user ID from Facebook. How can I access the email and other user information? Here is the data I am currently receiving from Faceb ...

Exploring Various JSON Arrays

There are 3 arrays provided below which I have no control over: groups_array = [ { "group" : "Mobile Test Region", "id" : "251" }, { "group" : "Mobile Demo Region", "id" : "252" } ] locations_array = [ { "location" : "M Testing", " ...

The innerHTML of null cannot be set in Vue JS

I am attempting to showcase my array and its modifications after applying various methods <template> <div> <div id="example"></div> <div id="example1"></div> </div> </template> <s ...

Hiding elements in HTML by setting their display property to "

I'm struggling with this code: <div id="affichageRecherche"></div> <div class="row px-xl-9 d-flex justify-content-start" id="affichageCatalogue">(lot of code)</div> At the bottom of the page ...

Steps to integrate AngularJS 2 into an already existing Java Web project

Having experience with AngularJS 1.x in a .Net MVC application, I successfully downloaded all the required AngularJS min files and included them in the project without using npm or bower. Now, I am working on a Java Web application that utilizes servlets/j ...

Display a text field upon clicking on a specific link

I am trying to create a text field that appears when a link is clicked, but I haven't been able to get it right yet. Here is what I have attempted: <span id="location_field_index"> <a href="javascript:void(0)" onclick="innerHTML=\"< ...