Ways to display the values stored in localStorage in distinct div elements based on certain conditions

https://i.sstatic.net/BG3qd.png

In my recent project, I have created a feature where users can input specific values through input fields and have them stored directly in localStorage. These values represent different tasks, such as Task: Work Description: Learn Excel Deadline: 9/11/2019

Currently, I am able to parse and display all these values in a single div. However, my objective is to display each task along with its values in their respective matching div. For example, the task Work with its values should be displayed in a div categorized as "Work".

Despite implementing an if/else statement to address this issue, my limited knowledge of JavaScript is proving to be a challenge in achieving the desired outcome.

I will include the code snippets, images of the code, and examples of the output for better clarity.

Insert modified code here

If I remove the current if/else statement and replace it with a simple

taskOutputEl.appendChild(taskEl);

- the output remains as described before, with all localStorage values appearing in a single div.

HTML code

Insert HTML code snippet here

Answer №1

Issue Resolved!

Within the If/Else statements, I needed to modify the code as follows: if(document.querySelector("category").value && task.category){ blablabla output in the appropriate divs };

This change allows for the comparison of each input value with each category within the div-boxes.

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 React Basic Application runs smoothly when tested locally, however, in Azure, there seems to be an issue with loading the .CSS, .I

I have encountered an issue with my single web app where it functions well locally and deploys to Azure seamlessly via a release pipeline. However, after deployment, the .css file is not loading on the browser and returns a 404 error. The index.html file c ...

Most effective method for storing large volumes of data within JavaScript objects

To uniquely identify each item, I need to store data using 3 keys. In this example, I am using i, j, z as the keys. console.time('global1'); var global1 = {}; for (var i = 0; i < 100; ++i) { for (var j = 0; j < 100; ++j) { for (va ...

Creating a React Native project without the use of TypeScript

Recently I dived into the world of React Native and decided to start a project using React Native CLI. However, I was surprised to find out that it uses TypeScript by default. Is there a way for me to create a project using React Native CLI without TypeS ...

Ajax undoes any modifications enacted by JavaScript

When using ajax, I trigger an OnTextChangedEvent. Before this event occurs, there is a Javascript function that validates the input field and displays text based on its validity. However, once the Ajax is executed, it resets any changes made by the Javascr ...

Using Javascript to display a Div element for a short period of time when the mouse is clicked

Having some trouble creating a hidden colored block that appears after a mouse press anywhere on the page, stays visible for 2 seconds, and then disappears until another mouse press triggers it again. I've tried using '.click(function' and o ...

Caution: Prop type validation failed due to an invalid value being passed to ForwardRef(Slider)

Currently, I'm in the process of building a Material UI range Slider with two values. It functions correctly if initialized like this: const [value, setValue] = React.useState([5,20]); const [value, setValue] = React.useState([val]); const handl ...

Tips for avoiding parent div click interference in Angular

Working with Angular8, I have a div containing a routelink along with other components including a checkbox. Here's the structure: <div [routerLink]="['/somewhere', blablabla]"> <!--other components that navigate to the ro ...

The rule "react/jsx-sort-props" does not have a valid configuration

I've been attempting to organize props names alphabetically using the eslint-plugin-react plugin but I keep encountering this error: [Error ] .eslintrc.json: Configuration for rule "react/jsx-sort-props" is invalid: Value {"callbacksLast":true,"shorth ...

Utilize the native HTML attribute to capture the mouse wheel event

I'm interested in utilizing the mousewheel event in my project, but all the information I've found online relies on addEventListener(). I want to detect it using native HTML and CSS. In simpler terms, I'm hoping for something along the lines ...

Tips for transferring a reference to a variable, rather than its value, to a method in VueJS

Within my template, there is this code snippet: <input @input="myMethod(myVariableName)" /> Following that, I have the myMethod function: myMethod(variablePassed) { console.log(variablePassed) } Upon execution, I receive the value of th ...

Error: Expecting only one React element child to be passed into React.Children.only() function

I am encountering an issue while attempting to construct a web table using the antd library. The exact error message reads: "react.development.js:1251 Uncaught Error: React.Children.only expected to receive a single React element child". I have been stru ...

adjusting the dimensions of images to ensure uniformity in size

After many attempts, I am still struggling to resize my image. Can anyone offer assistance? I want all images to have the same dimensions. Here is the HTML code: <link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='sty ...

The initial number is inserted within the text box upon entering the final number

Whenever I enter the final digit, the text-box swallows up the initial number (it vanishes), resulting in an additional space. https://i.stack.imgur.com/Vfm8s.png https://i.stack.imgur.com/od4bQ.png Upon clicking outside of the text-box, the formatting ...

Encounter issue when attempting to insert multiple items into MongoDB

// Import User and Item Models const User = require('../../models/User'); const Item = require('../../models/Item'); router .post('/login/:id', passport.authenticate('jwt', {session: false}), (req, res) => { ...

How to initiate a click event with JavaScript through C# in a WebBrowser control

Can the click function be triggered from a C# application? Below is the code that defines the function: $('#connectbtn').unbind('click').attr('disabled', false); $('#connectbtn').bind('click', ...

Transferring files to Django using AJAX

I am struggling with the process of uploading files to django using ajax. The upload is done within a modal window. The Form <div class="modal fade bs-example-modal-lg" id="fileUploadModal" role="dialog" aria-hidden="true"> <div class="modal ...

The Next Js API is experiencing difficulties resolving

I'm just starting out with back-end development so I could use some assistance with my current project. I am working on a next.js application that applies a black and white filter to an image when it is uploaded. In the index.js file, once a file is s ...

Error encountered with Paypal code. Being redirected to error code 400

Hello everyone, I am currently working on creating a simple webpage and practicing how to integrate PayPal into our website. However, I seem to be encountering an issue where it is redirecting me to a 400 error page. Below is the code snippet that I have ...

Guide to implementing a variable delay or sleep function in JQuery within a for loop

I've noticed that many people have asked similar questions, but none of the solutions provided seem to work in my specific case. My goal is to incorporate a delay within a for loop with varying time lengths. These time lengths are retrieved from an a ...

Incorporating a helper JavaScript file to seamlessly integrate Typeform into a project built with Vue

Struggling with incorporating a typeform into my website through the use of both vue and laravel. The problem arises when trying to embed the typeform using a script, as Vue throws an error when attempting to include the script directly within the compone ...