Tips on how to monitor the changes in all elements within an array using .onchange

I have an array of elements with the class "job", obtained using getElementsByClassName("job"). I am attempting to "listen" on all the objects in this array. Initially, I assumed this task would be straightforward, but it seems there is something crucial that eludes me.

However, on every iteration of .addEventListener("change", saveJobs()), the function saveJobs gets executed. This behavior is unexpected as it should only occur "onchange."

There are numerous aspects to consider here.

for( let d = 0; d < jobObjectArray.length; d++)
{
    jobStorageHolder = JSON.parse(localStorage.getItem("jobStorageArray"));
    if((jobArray[d] === undefined) || (jobArray[d] === null)){
        break;
    } else {
        jobArray[d].addEventListener("change", saveJobs());
    }
}

Error found at lines 77-85.

Check out this link for the complete code, including breakpoints set above the suspected error spot. Help would be greatly appreciated.

In summary:

  1. The program should add an event listener onchange to all job elements of the specified class.
  2. The program is expected to store the new job value into local storage.
  3. The program must refrain from saving jobs during each iteration of the event listener.

Answer №1

A common mistake you made is in this line of code:

jobArray[d].addEventListener("change", saveJobs);
Alternatively, you could use:
jobArray[d].addEventListener("change", createYourFunctionHere);

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

The media parameter seems to be malfunctioning when attempting to send it to the Kaleyra API using code

Attempting to send media through the Kaleyra API using my code is proving unsuccessful. However, when I make the same request via Postman, it works perfectly fine. async whatsappAPIWithAttachment(requestBody) { let api_key = ""; if (requ ...

Adjust the Bootstrap row height to both occupy the full height while also being limited by the height of a designated container

Here's a puzzling question.. I've got a container with multiple rows, and I want these rows to completely fill the container's height without overflowing. I'm trying to avoid manually setting the row heights. When I add class="h-1 ...

Showing images in array format from database using Laravel

I tried to set up a database for storing images. The URL of the image is successfully stored but in an array format like ["light.jpg"]. However, when I try to display the image from the database, it only shows an image icon and not the actual image. The im ...

Using TailwindCSS with Vite in a vanilla JavaScript project: A step-by-step guide

As a beginner, I feel like I'm losing my mind trying to figure this out. I've watched countless tutorials and read through numerous documents, but still can't seem to get it working. Does anyone have any advice on how to successfully integra ...

Angular 4 and Webpack: Compilation Error

After successfully running npm install, I encountered an error when trying to execute ng serve. Despite multiple attempts and troubleshooting, the issue persists. Could this be related to Angular versions? Interestingly, the same project runs smoothly on ...

Navigating through various Headers in ReactjsHandling different Headers in Reactjs

I am currently working on a project using Reactjs (Nextjs) and I need to have different headers for the home page compared to the rest of the pages. I have created a "Layout.js" file where I have placed the header and footer components, and then imported ...

NodeJs is facing a challenge with the global variable for retrieving all routes methods after successful sign in

I have created a blog page with options for signing up and signing in. I used the req.locals.<name> method Using the GET method. Code snippet from server.js app.get('*',(req,res, next) => { res.locals.user = req.user || null; ...

Issue: Spaces are not being displayed between items in the @Html.DisplayFor statement within the Foreach

I have encountered a few similar queries on this platform and attempted the suggested solutions, but unfortunately, they did not resolve my specific issue. Within my view, I am using @Html.DisplayFor in a Foreach loop to display all GroupIDs in a particul ...

Verify if the date string includes the day

Here's the scenario: a user clicks on one of two links, either 2012/10, or 2012/10/15. I am extracting the day value from the link to pass it onto an AJAX request that will change days on an archive page. Is using a regular expression like /\d{ ...

The issue of Meteor and React Router resulting in blank rendering

I've been diligently following the steps outlined in the Meteor React Routing guide. However, after implementing the routing, my app mysteriously stopped rendering anything (despite working perfectly fine prior to adding routing), and I can't see ...

Turn the entire row into a bright light when the mouse is moved over

I'm having an issue with highlighting entire rows using jQuery in an HTML table generated by a tool. I'm struggling to highlight the whole row when I click on a cell and unhighlight it when I move to another cell. Below is the table structure, ...

How to use jQuery to maintain an image at the top of a div

Within my HTML, there is a primary root div element containing an image. <div id="root"> <img id="msg"/> </div> Using jQuery, I am able to prepend multiple div elements inside the main root div. However, the problem arises when these ...

The container that utilizes the grid layout is compact and has a near-invisible height

grid-template: display; font-style: "Josefin Sans", sans-serif; size-of-text: 10px; element-height: 0px; spacing-bottom: 0px; spacing-left: 0px; spacing-right: 0px; spacing-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-up: 0 ...

Troubleshooting problem with Materialize CSS in UI router

Incorporating Materialize CSS along with Angular's ui.router for state management and HTML rendering has led to a challenge. Specifically, the Materialize Select component is not initialized upon state changes since Materialize components are typicall ...

Node server quickly sends a response to an asynchronous client request

Apologies for my lack of writing skills when I first wake up, let me make some revisions. I am utilizing expressjs with passportjs (local strategy) to handle my server and connect-busboy for file uploads. I believe passport will not have a role in this pr ...

Tips on getting the bot to react to a single "event" mentioned in the sentence, without multiple occurrences

Things are a bit complicated, but here's an example to illustrate: I've set up this event: client.on('message', async message => { if (message.content.toLowerCase().includes("megumin")) { message.channel.send("W ...

Difficulty encountered while using MySQL column update button

I'm looking for assistance in updating my database using an SQL statement after a button is clicked on the website. I attempted something but it was unsuccessful. Could anyone provide guidance? Here's the code snippet: http://pastebin.com/D0S83Jg ...

Is there a way to distribute my World instance among several step definition files in CucumberJS?

Currently, I am working on implementing a CucumberJS scenario that involves using multiple steps spread out across two separate step definition files. In this setup, the first step establishes certain variables in the World object which need to be accessed ...

Include a selection of images within a popover box

I am currently working on a component that contains various experiences, each with its own popover. My goal is to display an array of images within each popover. Specifically, I have different arrays of images named gastronomiaExperience, deportesExperien ...

What is the best method for retrieving multiple json_encode PHP outputs through Ajax?

$errMsgUsername=""; $errMsgPassword=""; if ($_POST['username']==""){ $errMsgUsername="Username is null"; } if ($_POST['password']==""){ $errMsgPassword="Password is null"; } echo json_encode(['er ...